/* ═══════════════════════════════════════════════════════════════════════════
   SOL VOL - RESPONSIVE BREAKPOINTS
   Mobile-First Responsive Design
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   BREAKPOINT VARIABLES
   ───────────────────────────────────────────────────────────────────────── */

/*
  Breakpoints:
  - xs: < 480px (small phones)
  - sm: 480px - 767px (large phones)
  - md: 768px - 1023px (tablets)
  - lg: 1024px - 1279px (small desktops)
  - xl: 1280px+ (large desktops)
*/

/* ─────────────────────────────────────────────────────────────────────────
   TABLET (768px - 1023px)
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  /* Reduce spacing */
  :root {
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 48px;
    --card-width: 150px;
    --card-height: 217px;
  }

  /* Typography */
  h1 {
    font-size: var(--text-4xl);
  }

  h2 {
    font-size: var(--text-3xl);
  }

  /* Game Board */
  .game-board {
    padding: var(--space-sm);
  }

  .central-arena {
    transform: rotateX(3deg);
  }

  .hand-container {
    height: 150px;
  }

  .hand-cards .tcg-card {
    margin-left: -35px;
  }

  /* Hero zones */
  .hero-zone {
    padding: var(--space-sm) var(--space-md);
  }

  .hero-portrait {
    width: 80px;
    height: 80px;
  }

  .hero-portrait__power {
    width: 40px;
    height: 40px;
    bottom: -8px;
    right: -8px;
  }

  /* TPS crystals */
  .tps-crystal {
    width: 20px;
    height: 20px;
  }

  /* Trap zones */
  .trap-zones {
    display: none;
  }

  /* End turn button */
  .end-turn-btn {
    width: 60px;
    height: 60px;
    font-size: var(--text-xs);
  }

  /* Action log */
  .action-log {
    width: 150px;
    max-height: 200px;
  }

  /* Menu */
  .menu__logo {
    font-size: var(--text-4xl);
  }

  /* Deck builder */
  .deck-builder {
    grid-template-columns: 1fr 280px;
    gap: var(--space-md);
  }

  /* Collection */
  .collection__grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-md);
  }

  /* Shop */
  .shop__grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-md);
  }

  /* Leaderboard */
  .leaderboard-screen {
    padding: 0 24px 40px;
  }

  .leaderboard-panel {
    padding: 18px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   LARGE PHONES (480px - 767px)
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  :root {
    --space-lg: 16px;
    --space-xl: 20px;
    --card-width: 120px;
    --card-height: 174px;
    --card-width-sm: 90px;
    --card-height-sm: 130px;
  }

  /* Typography */
  h1 {
    font-size: var(--text-3xl);
  }

  h2 {
    font-size: var(--text-2xl);
  }

  h3 {
    font-size: var(--text-xl);
  }

  /* Game Board - Switch to portrait-friendly layout */
  .game-board {
    perspective: 800px;
  }

  .central-arena {
    transform: none;
    flex-direction: column;
  }

  .arena__zone {
    min-height: 100px;
    padding: var(--space-sm);
  }

  /* Hero zones - Stack info */
  .hero-zone {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
  }

  .hero-portrait {
    width: 60px;
    height: 60px;
  }

  .hero-portrait__frame {
    border-width: 3px;
  }

  .hero-portrait__health {
    width: 36px;
    height: 36px;
    bottom: -10px;
  }

  .hero-portrait__health-value {
    font-size: var(--text-base);
  }

  .hero-portrait__power {
    width: 32px;
    height: 32px;
    display: none; /* Hide on small screens */
  }

  /* TPS display */
  .tps-display {
    padding: var(--space-xs);
  }

  .tps-crystal {
    width: 16px;
    height: 16px;
  }

  .tps-display__text {
    font-size: var(--text-sm);
  }

  /* Hand - horizontal scroll */
  .hand-container {
    height: 130px;
    padding: 0 var(--space-sm);
  }

  .hand-cards {
    overflow-x: auto;
    padding-bottom: var(--space-sm);
  }

  .hand-cards .tcg-card {
    margin-left: -25px;
    flex-shrink: 0;
    transform: none !important;
  }

  .hand-cards .tcg-card:hover {
    transform: translateY(-20px) scale(1.1) !important;
  }

  /* Opponent hand */
  .opponent-hand-container {
    height: 80px;
  }

  .opponent-hand-cards .card-back {
    width: 45px;
    height: 65px;
    margin-left: -15px;
  }

  /* End turn button - move to corner */
  .end-turn-btn {
    width: 50px;
    height: 50px;
    right: var(--space-sm);
    font-size: 10px;
  }

  /* Turn indicator */
  .turn-indicator {
    display: none;
  }

  /* Action log - hide on mobile */
  .action-log {
    display: none;
  }

  /* Profit meter */
  .profit-meter {
    width: 120px;
  }

  .profit-meter__bar {
    height: 16px;
  }

  /* Cards */
  .tcg-card__cost {
    width: 32px;
    height: 32px;
    top: -6px;
    left: -6px;
  }

  .tcg-card__cost-value {
    font-size: var(--text-lg);
  }

  .tcg-card__art {
    height: 70px;
  }

  .tcg-card__name {
    font-size: 10px;
  }

  .tcg-card__type-gem {
    font-size: 8px;
    top: 78px;
  }

  .tcg-card__description {
    font-size: 9px;
  }

  /* Menu */
  .menu__header {
    padding: var(--space-xl) var(--space-md);
  }

  .menu__logo {
    font-size: var(--text-3xl);
  }

  .menu__nav {
    padding: var(--space-md);
  }

  .btn-tavern {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-base);
  }

  /* Top bar */
  .top-bar {
    padding: var(--space-sm) var(--space-md);
    flex-wrap: wrap;
  }

  .currency-display__amount {
    font-size: var(--text-sm);
  }

  .profile-display__name {
    display: none;
  }

  /* Deck builder - single column */
  .deck-builder {
    grid-template-columns: 1fr;
  }

  .deck-builder__deck {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    border-radius: 16px 16px 0 0;
    z-index: var(--z-ui);
  }

  .deck-builder__cards {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    padding-bottom: 220px;
  }

  /* Collection */
  .collection__header {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }

  .collection__grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    padding: var(--space-md);
  }

  /* Shop */
  .shop__grid {
    grid-template-columns: 1fr;
  }

  /* Leaderboard */
  .leaderboard__scroll {
    padding: var(--space-md);
  }

  .leaderboard__entry {
    padding: var(--space-sm);
  }

  .leaderboard__rank {
    width: 32px;
    height: 32px;
    font-size: var(--text-base);
  }

  .leaderboard-brand {
    align-items: flex-start;
    text-align: left;
    gap: 6px;
  }

  .leaderboard-back-btn {
    position: static;
    margin-bottom: var(--space-xs);
  }

  .leaderboard-panel-header {
    align-items: flex-start;
  }

  .leaderboard-panel-meta {
    align-items: flex-start;
  }

  .leaderboard-header-row {
    grid-template-columns: 48px 1fr 80px;
    padding: 6px 8px;
  }

  .leaderboard-panel .leaderboard-row {
    grid-template-columns: 48px 1fr 80px;
    padding: 8px 10px;
  }

  .leaderboard-panel .leaderboard-rank-pill {
    width: 44px;
    height: 44px;
    border-radius: 10px;
  }

  /* Battle pass */
  .battlepass__tier {
    width: 100px;
  }

  .battlepass__tier-reward {
    height: 60px;
  }

  /* Modal */
  .modal {
    width: 95%;
    padding: var(--space-md);
  }

  .modal__title {
    font-size: var(--text-xl);
  }

  /* Toast */
  .toast-container {
    left: var(--space-md);
    right: var(--space-md);
    top: var(--space-md);
  }

  .toast {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   SMALL PHONES (< 480px)
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 479px) {
  :root {
    --space-md: 12px;
    --space-lg: 14px;
    --card-width: 100px;
    --card-height: 145px;
    --card-width-sm: 75px;
    --card-height-sm: 109px;
  }

  /* Typography */
  h1 {
    font-size: var(--text-2xl);
  }

  h2 {
    font-size: var(--text-xl);
  }

  /* Leaderboard */
  .leaderboard-brand-title {
    letter-spacing: 4px;
  }

  .leaderboard-panel {
    padding: 14px;
  }

  .leaderboard-header-row {
    grid-template-columns: 44px 1fr 72px;
  }

  .leaderboard-panel .leaderboard-row {
    grid-template-columns: 44px 1fr 72px;
  }

  .leaderboard-panel .leaderboard-rank-pill {
    width: 40px;
    height: 40px;
  }

  /* Hero portrait - ultra compact */
  .hero-portrait {
    width: 50px;
    height: 50px;
  }

  .hero-portrait__frame {
    border-width: 2px;
  }

  .hero-portrait__health {
    width: 28px;
    height: 28px;
    bottom: -8px;
  }

  .hero-portrait__health-value {
    font-size: var(--text-sm);
  }

  /* TPS - show only number */
  .tps-crystal {
    display: none;
  }

  .tps-display__text {
    margin-left: 0;
  }

  /* Hand */
  .hand-container {
    height: 110px;
  }

  .hand-cards .tcg-card {
    margin-left: -30px;
  }

  /* Menu */
  .menu__logo {
    font-size: var(--text-2xl);
  }

  .menu__tagline {
    font-size: var(--text-sm);
  }

  /* Deck builder bottom sheet */
  .deck-builder__deck {
    height: 150px;
  }

  .deck-builder__cards {
    grid-template-columns: repeat(3, 1fr);
    padding-bottom: 170px;
  }

  /* Collection grid */
  .collection__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
  }

  /* Battle pass tiers - smaller */
  .battlepass__tier {
    width: 80px;
    padding: var(--space-sm);
  }

  .battlepass__tier-number {
    font-size: var(--text-lg);
  }

  .battlepass__tier-reward {
    height: 50px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   LANDSCAPE PHONE OVERRIDES
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) and (orientation: landscape) {
  /* Game board fills screen */
  .game-board {
    padding: var(--space-xs);
  }

  /* Hero zones side by side */
  .hero-zone {
    padding: var(--space-xs);
  }

  .hero-portrait {
    width: 50px;
    height: 50px;
  }

  /* Arena compact */
  .arena__zone {
    min-height: 70px;
  }

  /* Hand at bottom, scrollable */
  .hand-container {
    height: 90px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(26, 15, 8, 0.95);
    border-top: 2px solid var(--tavern-bronze);
    z-index: var(--z-hand);
  }

  /* Menu - landscape friendly */
  .menu__header {
    padding: var(--space-md);
  }

  .menu__nav {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .btn-tavern {
    width: auto;
    min-width: 150px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   LARGE DESKTOP (1280px+)
   ───────────────────────────────────────────────────────────────────────── */

@media (min-width: 1280px) {
  :root {
    --card-width: 200px;
    --card-height: 290px;
    --space-3xl: 80px;
  }

  .game-board {
    max-width: 1600px;
  }

  .central-arena {
    min-height: 400px;
  }

  .hand-container {
    height: 220px;
  }

  .hero-portrait {
    width: 120px;
    height: 120px;
  }

  .hero-portrait__power {
    width: 60px;
    height: 60px;
  }

  .hero-portrait__health {
    width: 56px;
    height: 56px;
  }

  .hero-portrait__health-value {
    font-size: var(--text-2xl);
  }

  .tps-crystal {
    width: 28px;
    height: 28px;
  }

  .profit-meter {
    width: 280px;
  }

  .end-turn-btn {
    width: 100px;
    height: 100px;
    font-size: var(--text-base);
  }

  .action-log {
    width: 220px;
    max-height: 400px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   TOUCH DEVICE OPTIMIZATIONS
   ───────────────────────────────────────────────────────────────────────── */

@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets */
  .btn-tavern {
    min-height: 48px;
  }

  .filter-btn {
    min-height: 40px;
    padding: var(--space-sm) var(--space-md);
  }

  /* Disable hover effects */
  .tcg-card:hover {
    transform: none;
  }

  .hand-cards .tcg-card:hover {
    transform: none !important;
    margin-left: var(--hand-card-overlap);
    margin-right: 0;
  }

  /* Show tap indicator for cards */
  .tcg-card.tapped {
    transform: translateY(-20px) scale(1.1);
    z-index: var(--z-card-hover);
  }

  /* Tap to play indicator */
  .tcg-card.playable::before {
    content: 'TAP';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: var(--sol-mint);
    padding: var(--space-xs) var(--space-sm);
    border-radius: 4px;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    opacity: 0;
    transition: opacity var(--transition-fast);
    pointer-events: none;
  }

  .tcg-card.playable:active::before {
    opacity: 1;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   HIGH DPI / RETINA DISPLAYS
   ───────────────────────────────────────────────────────────────────────── */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Sharper borders */
  .tcg-card__frame {
    border-width: 3px;
  }

  .hero-portrait__frame {
    border-width: 4px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   PRINT STYLES (for screenshots/sharing)
   ───────────────────────────────────────────────────────────────────────── */

@media print {
  .game-screen {
    position: static;
    height: auto;
  }

  .central-arena {
    transform: none;
  }

  .action-log,
  .end-turn-btn,
  .turn-indicator {
    display: none;
  }
}