/**
 * PulsePrize Demo — mobile layout (max-width 767px).
 * Desktop (768px+) unchanged. Load after other stylesheets.
 */

/* Dev-only test control (hidden everywhere) */
body.pp-terminal .pp-test-sound-btn {
  display: none !important;
}

/* Sound control in header (all breakpoints) */
body.pp-terminal .pp-header-util {
  gap: 0.5rem;
}

body.pp-terminal .pp-sound-toggle-btn {
  padding: 0.35rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid rgba(0, 255, 157, 0.4);
  background: rgba(0, 255, 157, 0.1);
  color: #00ff9d;
  cursor: pointer;
  white-space: nowrap;
}

body.pp-terminal .pp-sound-toggle-btn:hover {
  background: rgba(0, 255, 157, 0.18);
  color: #fafafa;
}

body.pp-terminal .pp-sound-toggle-btn.pp-sound-toggle--muted {
  border-color: rgba(152, 152, 168, 0.45);
  background: rgba(152, 152, 168, 0.12);
  color: #b8b8c8;
}

body.pp-terminal .pp-sound-toggle-btn.pp-sound-toggle--muted:hover {
  background: rgba(152, 152, 168, 0.2);
  color: #e8e8f0;
}

body.pp-terminal .pp-btn-reset-account {
  border: 1px solid rgba(255, 80, 120, 0.4);
  color: #ffb4c8;
}

@media (min-width: 768px) {
  body.pp-terminal .pp-header-util {
    width: auto;
    flex-shrink: 0;
  }
}

@media (max-width: 767px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  body.pp-terminal {
    overflow-x: hidden;
  }

  body.pp-terminal .container.pp-demo-shell {
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
  }

  /* —— Header: single-row icon toolbar —— */
  body.pp-terminal #pulseprize-page-header .pp-header-inner {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }

  body.pp-terminal .pp-header-brand {
    flex: 1 1 auto;
    min-width: 0;
  }

  body.pp-terminal .pp-header-title {
    font-size: 1.15rem !important;
    letter-spacing: -0.06em !important;
    line-height: 1.1;
  }

  body.pp-terminal #pulseprize-header-tagline {
    display: none;
  }

  body.pp-terminal .pp-header-brand .h-9.w-9 {
    height: 2rem;
    width: 2rem;
  }

  body.pp-terminal .pp-header-brand .h-9.w-9 span {
    font-size: 0.95rem;
  }

  body.pp-terminal .pp-header-actions {
    flex-shrink: 0;
    gap: 0.25rem;
  }

  body.pp-terminal .header-right {
    width: auto;
    gap: 0.25rem;
  }

  body.pp-terminal .pp-header-btn-label {
    display: none;
  }

  body.pp-terminal .pp-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
  }

  body.pp-terminal .pp-header-icon--help {
    font-size: 1.05rem;
    font-weight: 800;
  }

  body.pp-terminal .pp-header-icon--money {
    font-size: 1.1rem;
    font-weight: 800;
  }

  body.pp-terminal .pp-header-icon--sound {
    font-size: 1.05rem;
    line-height: 1;
  }

  body.pp-terminal .pp-header-icon-btn,
  body.pp-terminal .header-right .pp-header-link-btn,
  body.pp-terminal .header-right .pp-demo-cta,
  body.pp-terminal .pp-sound-toggle-btn {
    width: 2.25rem;
    height: 2.25rem;
    min-height: 2.25rem;
    padding: 0 !important;
    flex: 0 0 auto;
    border-radius: 999px;
    font-size: 0 !important;
    letter-spacing: 0 !important;
    text-transform: none;
  }

  body.pp-terminal .header-right .pp-demo-cta {
    animation: none;
    box-shadow: none;
  }

  body.pp-terminal .pp-header-util {
    display: flex;
    width: auto;
    margin-top: 0;
    gap: 0.25rem;
  }

  body.pp-terminal .pp-sound-toggle-btn {
    border: 1px solid rgba(0, 255, 157, 0.45);
    background: rgba(0, 255, 157, 0.12);
    color: #00ff9d;
    font-weight: 600;
    cursor: pointer;
    z-index: 60;
  }

  body.pp-terminal .pp-sound-toggle-btn:active {
    background: rgba(0, 255, 157, 0.22);
  }

  /* —— Hero: pool before timer —— */
  body.pp-terminal .pp-hero-block {
    gap: 1.25rem;
    margin-bottom: 1.25rem !important;
  }

  body.pp-terminal #prizePool {
    font-size: clamp(1.85rem, 9vw, 2.75rem) !important;
    letter-spacing: -0.04em !important;
    line-height: 1.05;
    word-break: break-word;
  }

  body.pp-terminal #prizePoolUSDC {
    font-size: 1rem !important;
  }

  body.pp-terminal #pulseprize-hero-pool-line {
    font-size: clamp(0.8rem, 3.5vw, 1rem) !important;
    line-height: 1.35;
  }

  body.pp-terminal #timeLeft.timer-header {
    font-size: clamp(2.5rem, 14vw, 3.5rem) !important;
    line-height: 1;
  }

  body.pp-terminal .pp-hero-aside {
    text-align: left !important;
  }

  body.pp-terminal .pp-hero-timer {
    margin-top: 0.25rem;
  }

  body.pp-terminal .pp-lucky-viewer-cta {
    min-height: 44px;
  }

  /* —— Mini stats —— */
  body.pp-terminal .pp-demo-mini-stats {
    gap: 0.65rem !important;
    margin-bottom: 1.25rem !important;
  }

  body.pp-terminal .pp-demo-mini-stats > div {
    padding: 0.85rem !important;
  }

  body.pp-terminal .pp-demo-mini-stats .section-header {
    font-size: 0.6rem;
    line-height: 1.2;
  }

  body.pp-terminal .pp-demo-mini-stats p {
    font-size: clamp(0.95rem, 4vw, 1.15rem) !important;
  }

  /* —— Main: single column, player first —— */
  body.pp-terminal .main-content {
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  body.pp-terminal .main-content .right-column {
    order: -1;
    width: 100%;
    min-width: 0;
  }

  body.pp-terminal .main-content .left-column {
    order: 0;
    width: 100%;
    min-width: 0;
  }

  body.pp-terminal .main-content section {
    padding: 1rem !important;
  }

  body.pp-terminal .main-content h2 {
    font-size: 0.8rem !important;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  /* —— Player area —— */
  body.pp-terminal #player-area h2 {
    font-size: 1rem !important;
    margin-bottom: 0.75rem;
  }

  body.pp-terminal #wallet-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.75rem;
    padding: 0.75rem !important;
  }

  body.pp-terminal .wallet-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    margin: 0;
    font-size: 0.8125rem;
  }

  body.pp-terminal .wallet-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9898a8 !important;
    margin-right: 0;
    white-space: normal;
  }

  body.pp-terminal .wallet-row span:last-child {
    font-size: 0.95rem;
    word-break: break-word;
  }

  body.pp-terminal .player-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 0.75rem;
  }

  body.pp-terminal .player-buttons button {
    min-height: 44px;
    width: 100%;
    font-size: 0.75rem;
    padding: 0.5rem 0.4rem;
    margin: 0 !important;
  }

  body.pp-terminal .pp-btn-reset-account {
    grid-column: 1 / -1;
    margin-top: 0.35rem !important;
    border-color: rgba(255, 80, 120, 0.45) !important;
    color: #ffb4c8 !important;
  }

  body.pp-terminal #player-area > div:last-child {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #2a2a36;
  }

  body.pp-terminal #player-area > div:last-child p {
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
  }

  body.pp-terminal #player-area label {
    font-size: 0.8rem;
    margin-top: 0.5rem;
  }

  body.pp-terminal #player-area input[type="number"],
  body.pp-terminal #player-area select {
    min-height: 44px;
    font-size: 1rem;
    margin-bottom: 0.65rem;
  }

  body.pp-terminal #enter-game {
    width: 100%;
    min-height: 48px;
    margin-top: 0.75rem;
    font-size: 1rem;
    font-weight: 700;
  }

  /* —— Tables: horizontal scroll in card —— */
  body.pp-terminal .pp-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0.5rem 0 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid #2a2a36;
  }

  body.pp-terminal .pp-table-scroll table {
    min-width: 260px;
    margin: 0;
  }

  body.pp-terminal #winnersTable th,
  body.pp-terminal #winnersTable td,
  body.pp-terminal #donatorLeaderboard th,
  body.pp-terminal #donatorLeaderboard td {
    padding: 0.65rem 0.5rem !important;
    font-size: 0.8125rem !important;
  }

  /* —— Modals —— */
  body.pp-terminal .modal-content {
    width: min(92vw, 24rem) !important;
    max-width: none !important;
    max-height: min(88vh, 640px);
    overflow-y: auto;
    padding: 1.25rem 1rem !important;
    -webkit-overflow-scrolling: touch;
  }

  body.pp-terminal #howItWorksModal .hiw-modal,
  body.pp-terminal #viewAllModal .modal-content {
    width: min(94vw, 28rem) !important;
  }

  body.pp-terminal #setNicknameModal .modal-content input[type="text"],
  body.pp-terminal #setNicknameModal .modal-content button,
  body.pp-terminal .modal-buttons button {
    min-height: 44px;
    width: 100%;
    max-width: 100%;
    font-size: 1rem;
  }

  body.pp-terminal #winnerModal .modal-content {
    width: min(94vw, 22rem) !important;
  }

  body.pp-terminal #winnerModal .modal-buttons {
    flex-direction: column;
    gap: 0.5rem;
  }

  body.pp-terminal #winnerModal .modal-buttons button {
    width: 100%;
    min-height: 44px;
  }

  /* —— Toasts: top strip (keeps bottom clear for Activity feed) —— */
  body.pp-terminal .notification-container {
    top: calc(3.35rem + env(safe-area-inset-top));
    bottom: auto;
    left: max(0.75rem, env(safe-area-inset-left));
    right: max(0.75rem, env(safe-area-inset-right));
    width: auto;
    max-width: none;
    pointer-events: none;
  }

  body.pp-terminal .notification {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100%;
    font-size: 0.75rem;
    padding: 0.55rem 0.7rem;
    margin-bottom: 0.35rem;
    border-radius: 0.65rem;
    pointer-events: auto;
  }

  body.pp-terminal .notification.notification--compact {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  }

  /* —— Activity feed dock: full-width bottom bar on mobile —— */
  body.pp-terminal .pp-activity-dock {
    left: max(0.75rem, env(safe-area-inset-left)) !important;
    right: max(0.75rem, env(safe-area-inset-right)) !important;
    bottom: max(0.65rem, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    align-items: stretch;
  }

  body.pp-terminal .notification-toggle.pp-activity-feed-toggle {
    width: 100%;
    min-height: 44px;
    padding: 0.65rem 1rem;
    border-radius: 999px;
    font-size: 0.7rem;
  }

  body.pp-terminal .pp-activity-feed-badge {
    position: absolute;
    top: -0.35rem;
    right: 0.35rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: #c026ff;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.1rem;
    text-align: center;
    box-shadow: 0 0 0 2px #0a0a0c;
  }

  body.pp-terminal .notification-log {
    width: 100% !important;
    max-height: min(45vh, 320px);
    border-radius: 1rem 1rem 0.75rem 0.75rem;
  }

  body.pp-terminal .notification-log.is-open {
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
  }

  /* —— Footer —— */
  body.pp-terminal .footer {
    padding: 1rem !important;
    font-size: 0.75rem;
  }

  body.pp-terminal .footer p {
    margin: 0.25rem 0;
  }
}

/* Small phones */
@media (max-width: 380px) {
  body.pp-terminal .player-buttons {
    grid-template-columns: 1fr;
  }

  body.pp-terminal #wallet-info {
    grid-template-columns: 1fr;
  }
}