.mobile-arena {
  display: none;
}

/* Equal mobile board cards: fixes uneven spacer/card sizing on phones and tablets. */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .board {
    grid-template-columns: repeat(11, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(11, minmax(0, 1fr)) !important;
  }

  .tile {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
}

/* Phone/tablet arena mode: prevents mobile browsers from falling back to desktop board. */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .mobile-arena {
    display: grid !important;
  }

  .app {
    display: grid !important;
    grid-template-areas:
      "hud"
      "arena" !important;
    gap: 8px !important;
  }

  .hud {
    grid-area: hud !important;
  }

  .mobile-arena {
    grid-area: arena !important;
    width: min(100%, 430px) !important;
    margin: 0 auto !important;
  }

  .layout,
  .board-wrap,
  .side,
  .portfolio,
  .standings-panel {
    display: none !important;
  }
}

/* FINAL MOBILE RESCUE: loaded after styles.css so it wins on phones. */
@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden !important;
  }

  body {
    background: linear-gradient(180deg, #eaf4fa 0%, #cbdce4 100%) !important;
  }

  .scene-bg,
  .sky-coin {
    display: none !important;
  }

  .app {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 8px 8px 88px !important;
  }

  .hud {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 9px !important;
    border-radius: 14px !important;
  }

  .brand {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 9px !important;
    align-items: center !important;
  }

  .logo {
    width: 46px !important;
    height: 46px !important;
    border-width: 4px !important;
    font-size: 0.86rem !important;
  }

  h1,
  .brand h1 {
    font-size: 1.05rem !important;
    line-height: 1.05 !important;
  }

  .brand p {
    max-height: 2.35em !important;
    overflow: hidden !important;
    font-size: 0.66rem !important;
    line-height: 1.15 !important;
  }

  .stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
  }

  .stats div {
    min-width: 0 !important;
    padding: 6px 4px !important;
    border-radius: 10px !important;
    text-align: center !important;
  }

  .stats span {
    font-size: 0.52rem !important;
    line-height: 1 !important;
  }

  .stats strong {
    margin-top: 2px !important;
    font-size: clamp(0.64rem, 3vw, 0.86rem) !important;
    line-height: 1.05 !important;
  }

  .layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 8px !important;
  }

  .board-wrap {
    width: 100% !important;
    padding: 6px !important;
    overflow: visible !important;
    border-radius: 14px !important;
  }

  .board-top {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin-bottom: 6px !important;
  }

  .board-top > div {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
  }

  .board-top h2 {
    font-size: 0.95rem !important;
    line-height: 1 !important;
  }

  .board-top p {
    margin-top: 2px !important;
    font-size: 0.68rem !important;
    line-height: 1.1 !important;
    overflow-wrap: anywhere !important;
  }

  .board-top .small-btn {
    width: 100% !important;
    margin: 0 !important;
    padding: 7px 2px !important;
    border-radius: 9px !important;
    font-size: 0.64rem !important;
    line-height: 1 !important;
  }

  .board {
    width: 100% !important;
    max-width: calc(100vw - 28px) !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto !important;
    gap: 2px !important;
    padding: 4px !important;
    border-radius: 12px !important;
    transform: none !important;
  }

  .tile {
    min-width: 0 !important;
    min-height: 0 !important;
    border-width: 1px !important;
    border-bottom-width: 2px !important;
    border-radius: 4px !important;
    padding: 2px !important;
    box-shadow: 0 2px 4px rgba(14, 43, 52, 0.12) !important;
  }

  .tile::after {
    height: 2px !important;
  }

  .domain {
    display: block !important;
    max-width: 100% !important;
    max-height: 2.1em !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    font-size: clamp(0.24rem, 1.45vw, 0.42rem) !important;
    line-height: 1 !important;
  }

  .biz,
  .owned {
    display: none !important;
  }

  .badge {
    right: 1px !important;
    bottom: -1px !important;
    font-size: clamp(0.42rem, 2.1vw, 0.66rem) !important;
  }

  .token {
    left: 2px !important;
    bottom: 2px !important;
    width: 14px !important;
    height: 14px !important;
    border-width: 2px !important;
    font-size: 0 !important;
  }

  .token::after {
    font-size: 8px !important;
  }

  .city-plaza {
    padding: 4px !important;
    border-width: 1px !important;
    border-radius: 8px !important;
    gap: 1px !important;
  }

  .city-title {
    font-size: clamp(0.5rem, 3.3vw, 0.82rem) !important;
    line-height: 1 !important;
  }

  .city-subtitle,
  .arena-card i,
  .arena-spark.s3,
  .arena-spark.s4 {
    display: none !important;
  }

  .city-plaza .trophy-stage {
    width: 34px !important;
    height: 28px !important;
  }

  .city-plaza .trophy-cup {
    width: 22px !important;
    height: 18px !important;
  }

  .city-plaza .trophy-cup::before,
  .city-plaza .trophy-cup::after {
    width: 9px !important;
    height: 9px !important;
    border-width: 3px !important;
  }

  .city-plaza .trophy-cup::before {
    left: -8px !important;
  }

  .city-plaza .trophy-cup::after {
    right: -8px !important;
  }

  .city-plaza .trophy-base {
    width: 38px !important;
    height: 11px !important;
    border-width: 1px !important;
    font-size: 0.32rem !important;
  }

  .scow-premium-arena {
    left: 5% !important;
    right: 5% !important;
    top: 31% !important;
    bottom: 7% !important;
    border-radius: 10px !important;
    transform: none !important;
  }

  .ring-outer {
    border-width: 7px !important;
  }

  .arena-card {
    width: clamp(42px, 13vw, 58px) !important;
    height: clamp(30px, 8.6vw, 42px) !important;
    border-width: 1px !important;
    border-radius: 6px !important;
  }

  .arena-card b {
    font-size: clamp(0.32rem, 1.65vw, 0.46rem) !important;
  }

  .arena-dice {
    width: clamp(20px, 6vw, 28px) !important;
    border-radius: 6px !important;
  }

  .arena-button {
    width: clamp(56px, 18vw, 76px) !important;
    border-width: 3px !important;
    bottom: -5% !important;
    font-size: clamp(0.62rem, 4.2vw, 1rem) !important;
  }

  .side {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  .side > section {
    padding: 9px !important;
    border-radius: 12px !important;
  }

  .dice-panel {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .dice {
    gap: 5px !important;
  }

  .die {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
  }

  .roll-btn {
    min-height: 42px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    font-size: 0.9rem !important;
  }

  .dice-panel p {
    grid-column: 1 / -1 !important;
    font-size: 0.68rem !important;
    line-height: 1.15 !important;
  }

  .feature-card,
  .log,
  .tournament-panel,
  .portfolio,
  .standings-panel {
    display: none !important;
  }

  .mobile-dock {
    position: fixed !important;
    left: 6px !important;
    right: 6px !important;
    bottom: 6px !important;
    z-index: 500 !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 6px !important;
    border-radius: 16px !important;
    background: rgba(221, 235, 243, 0.9) !important;
    backdrop-filter: blur(12px);
  }

  .dock-item {
    min-width: 0 !important;
    min-height: 50px !important;
    padding: 5px 1px !important;
    border-radius: 10px !important;
    font-size: clamp(0.42rem, 2vw, 0.58rem) !important;
    line-height: 1 !important;
  }

  .dock-icon {
    width: 21px !important;
    height: 21px !important;
    border-radius: 5px !important;
  }

  .dock-item em {
    right: -3px !important;
    top: -7px !important;
    width: 20px !important;
    height: 20px !important;
    border-width: 2px !important;
    font-size: 0.62rem !important;
  }

  .modal {
    align-items: start !important;
    padding: 8px !important;
    overflow-y: auto !important;
  }

  .mini-game {
    width: min(100%, calc(100vw - 16px)) !important;
    max-height: calc(100vh - 16px) !important;
    margin: 0 !important;
    overflow-y: auto !important;
    border-radius: 14px !important;
  }

  .answer-grid,
  .result-score,
  .admin-grid,
  .pack-cards,
  .daily-track {
    grid-template-columns: 1fr !important;
  }

  .rewardCinematic {
    max-width: calc(100vw - 20px) !important;
    font-size: clamp(1.7rem, 13vw, 3rem) !important;
    white-space: normal !important;
    text-align: center !important;
  }
}

/* HARD MOBILE MODE: separate compact phone UI, not a squeezed desktop. */
@media (max-width: 760px) {
  .mobile-arena {
    display: grid !important;
  }

  .app {
    display: grid !important;
    grid-template-areas:
      "hud"
      "arena" !important;
    gap: 8px !important;
  }

  .hud {
    grid-area: hud !important;
  }

  .mobile-arena {
    grid-area: arena !important;
    width: min(100%, 430px) !important;
    margin: 0 auto !important;
    gap: 10px !important;
  }

  .layout,
  .board-wrap,
  .side,
  .portfolio,
  .standings-panel {
    display: none !important;
  }

  .mobile-arena-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-weight: 950;
  }

  .mobile-arena-top span,
  .mobile-arena-top strong {
    border: 2px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    padding: 8px 12px;
    background: linear-gradient(180deg, #123a64, #061e38);
    box-shadow: 0 10px 18px rgba(4, 18, 31, 0.18);
  }

  .mobile-arena-stage {
    position: relative;
    display: grid;
    min-height: min(58vh, 460px);
    align-content: center;
    gap: 16px;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.72);
    border-radius: 24px;
    padding: 24px 16px;
    text-align: center;
    background:
      radial-gradient(circle at 50% 28%, rgba(255, 235, 99, 0.36), transparent 9rem),
      radial-gradient(circle at 50% 50%, rgba(63, 235, 119, 0.35), transparent 11rem),
      linear-gradient(180deg, #f8fcff, #bfd4df);
    box-shadow:
      inset 0 0 0 2px rgba(255, 255, 255, 0.5),
      inset 0 -24px 40px rgba(18, 44, 58, 0.16),
      0 26px 42px rgba(12, 35, 48, 0.24);
  }

  .mobile-arena-stage::before {
    position: absolute;
    inset: 16% 8%;
    content: "";
    border: 18px solid #263a48;
    border-radius: 50%;
    opacity: 0.22;
  }

  .mobile-trophy {
    position: relative;
    z-index: 2;
    width: 86px;
    height: 86px;
    margin: 0 auto;
    border-radius: 22px 22px 36px 36px;
    background:
      radial-gradient(circle at 35% 20%, #fff8bb, transparent 24%),
      linear-gradient(180deg, #ffe889, #e0a326 62%, #a96317);
    box-shadow: inset 0 -10px 0 rgba(111, 67, 14, 0.18), 0 14px 22px rgba(13, 44, 42, 0.2);
    animation: trophyFloat 2.8s ease-in-out infinite;
  }

  .mobile-arena-stage h2 {
    position: relative;
    z-index: 2;
    font-size: clamp(2rem, 12vw, 3.8rem);
    line-height: 0.95;
    text-transform: uppercase;
    text-shadow: 0 4px 0 #fff, 0 12px 18px rgba(18, 44, 58, 0.18);
  }

  .mobile-arena-stage p {
    position: relative;
    z-index: 2;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 999px;
    padding: 8px 14px;
    color: #fff;
    background: linear-gradient(180deg, #7d441f, #2b170d);
    font-size: 0.88rem;
    font-weight: 950;
    overflow-wrap: anywhere;
  }

  .mobile-score-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .mobile-score-grid div {
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: 14px;
    padding: 10px 4px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(233, 244, 249, 0.9));
  }

  .mobile-score-grid span {
    display: block;
    color: #64746d;
    font-size: 0.62rem;
    font-weight: 900;
    text-transform: uppercase;
  }

  .mobile-score-grid strong {
    display: block;
    margin-top: 3px;
    font-size: clamp(0.82rem, 4vw, 1.18rem);
    font-weight: 950;
  }

  .mobile-actions {
    display: grid;
    grid-template-columns: 1fr 0.62fr;
    gap: 8px;
  }

  .mobile-actions .roll-btn,
  .mobile-actions .small-btn {
    min-height: 54px !important;
    border-radius: 16px !important;
    font-size: 0.96rem !important;
    font-weight: 950 !important;
  }

  .mobile-actions .small-btn {
    color: #fff;
    background: linear-gradient(180deg, #185baa, #073b83);
  }

  .mobile-mode-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .mobile-mode-strip button {
    min-height: 42px;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(180deg, #123a64, #061e38);
    font-weight: 950;
  }

  .mobile-board-toggle {
    min-height: 44px;
    border: 2px solid rgba(255, 255, 255, 0.66);
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(180deg, #7d441f, #2b170d);
    box-shadow: 0 10px 18px rgba(4, 18, 31, 0.18);
    font-weight: 950;
  }

  .board {
    max-width: min(100vw - 16px, 390px) !important;
    width: min(100vw - 16px, 390px) !important;
    gap: 1px !important;
    padding: 3px !important;
    border-radius: 10px !important;
  }

  .tile {
    border-radius: 3px !important;
    padding: 1px !important;
  }

  .domain {
    font-size: clamp(0.2rem, 1.2vw, 0.34rem) !important;
    max-height: 2em !important;
  }

  .badge {
    opacity: 0.42 !important;
  }

  .city-title {
    font-size: clamp(0.45rem, 2.7vw, 0.68rem) !important;
  }

  .trophy-stage {
    display: none !important;
  }

  .scow-premium-arena {
    top: 24% !important;
    bottom: 6% !important;
  }

  .arena-card {
    display: none !important;
  }

  .arena-button {
    bottom: 12% !important;
  }

  .ring-outer,
  .ring-inner,
  .arena-glow {
    display: none !important;
  }

  .arena-dice {
    top: 44% !important;
  }

  .die-a {
    left: 38% !important;
  }

  .die-b {
    left: 52% !important;
  }

  .dice-panel {
    position: sticky !important;
    bottom: 66px !important;
    z-index: 80 !important;
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    width: min(100%, 390px) !important;
    margin: 0 auto !important;
    border: 2px solid rgba(255, 255, 255, 0.66) !important;
    background: linear-gradient(180deg, #123a64, #061e38) !important;
    color: #fff !important;
    box-shadow: 0 14px 24px rgba(4, 18, 31, 0.28) !important;
  }

  .dice-panel .roll-btn {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 1rem !important;
  }

  .dice-panel p {
    color: rgba(234, 243, 255, 0.72) !important;
  }

  .feature-card,
  .log,
  .tournament-panel,
  .portfolio,
  .standings-panel {
    display: none !important;
  }

  .mobile-dock {
    height: 58px !important;
    align-items: stretch !important;
  }

  .dock-item {
    min-height: 44px !important;
  }

  .dock-item strong {
    display: none !important;
  }

  .dock-icon {
    width: 25px !important;
    height: 25px !important;
  }
}

/* Mobile Board Mode toggle: show the card-spacer board only when requested. */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  body.mobile-board-mode .app {
    grid-template-areas:
      "hud"
      "arena"
      "board"
      "controls" !important;
  }

  body.mobile-board-mode .layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    grid-area: board !important;
    width: 100vw !important;
    margin-left: -22px !important;
    justify-items: start !important;
  }

  body.mobile-board-mode .board-wrap {
    display: block !important;
    grid-area: board !important;
    width: calc(100vw - 42px) !important;
    max-width: 356px !important;
    margin: 0 !important;
    padding: 3px !important;
    border: 2px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(219, 234, 241, 0.94)) !important;
    box-shadow: 0 16px 28px rgba(12, 35, 48, 0.18) !important;
  }

  body.mobile-board-mode .board-top {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin-bottom: 5px !important;
  }

  body.mobile-board-mode .board-top > div {
    grid-column: 1 / -1 !important;
  }

  body.mobile-board-mode .board-top h2 {
    font-size: 0.82rem !important;
  }

  body.mobile-board-mode .board-top p {
    font-size: 0.62rem !important;
  }

  body.mobile-board-mode .board-top .small-btn {
    padding: 6px 2px !important;
    font-size: 0.58rem !important;
  }

  body.mobile-board-mode .board {
    display: grid !important;
    grid-template-columns: repeat(11, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(11, minmax(0, 1fr)) !important;
    width: calc(100vw - 52px) !important;
    max-width: 346px !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    gap: 1px !important;
    padding: 3px !important;
  }

  body.mobile-board-mode .tile {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 3px !important;
    padding: 1px !important;
  }

  body.mobile-board-mode .side {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.mobile-board-mode .dice-panel {
    display: grid !important;
    grid-area: controls !important;
    width: calc(100vw - 42px) !important;
    max-width: 356px !important;
    margin: 0 !important;
  }
}

/* Last-word board toggle fix. */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  body.mobile-board-mode .layout,
  body.mobile-board-mode .board-wrap,
  body.mobile-board-mode #board,
  body.mobile-board-mode .board,
  body.mobile-board-mode .side,
  body.mobile-board-mode .dice-panel {
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.mobile-board-mode .layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    grid-area: board !important;
    width: 100vw !important;
    margin-left: -22px !important;
    justify-items: start !important;
  }

  body.mobile-board-mode .board-wrap {
    display: block !important;
    grid-area: board !important;
  }

  body.mobile-board-mode #board,
  body.mobile-board-mode .board {
    display: grid !important;
  }

  body.mobile-board-mode .side {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.mobile-board-mode .dice-panel {
    display: grid !important;
  }

  body.mobile-board-mode .mobile-arena-stage {
    min-height: 210px !important;
    padding: 14px 10px !important;
  }

  body.mobile-board-mode .mobile-trophy {
    width: 46px !important;
    height: 46px !important;
  }

  body.mobile-board-mode .mobile-arena-stage h2 {
    font-size: clamp(1.25rem, 8vw, 2rem) !important;
  }

  body.mobile-board-mode .mobile-score-grid {
    display: none !important;
  }
}

/* Mobile control and creator wheel cleanup. */
@media (max-width: 760px) {
  body.mobile-board-mode .dice-panel,
  .dice-panel {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    text-align: center !important;
  }

  .dice {
    justify-content: center !important;
  }

  .dice-panel .roll-btn {
    width: 100% !important;
    white-space: normal !important;
    line-height: 1.05 !important;
  }

  .dice-panel p {
    margin: 0 !important;
    max-height: 2.4em !important;
    overflow: hidden !important;
    text-align: center !important;
  }

  .wheel-stage {
    height: min(72vw, 280px) !important;
    margin: 10px 0 !important;
    border-radius: 14px !important;
  }

  .creator-wheel {
    width: min(68vw, 230px) !important;
    height: min(68vw, 230px) !important;
    border-width: 7px !important;
  }

  .creator-wheel::before {
    width: 38px !important;
    height: 38px !important;
    border-width: 6px !important;
  }

  .creator-wheel span {
    width: 56px !important;
    max-height: 2.2em !important;
    overflow: hidden !important;
    font-size: clamp(0.42rem, 2.2vw, 0.56rem) !important;
    line-height: 1 !important;
    overflow-wrap: anywhere !important;
  }

  .creator-wheel span:nth-child(1) {
    transform: rotate(30deg) translate(31px, -6px) rotate(-30deg) !important;
  }

  .creator-wheel span:nth-child(2) {
    transform: rotate(90deg) translate(31px, -6px) rotate(-90deg) !important;
  }

  .creator-wheel span:nth-child(3) {
    transform: rotate(150deg) translate(31px, -6px) rotate(-150deg) !important;
  }

  .creator-wheel span:nth-child(4) {
    transform: rotate(210deg) translate(31px, -6px) rotate(-210deg) !important;
  }

  .creator-wheel span:nth-child(5) {
    transform: rotate(270deg) translate(31px, -6px) rotate(-270deg) !important;
  }

  .creator-wheel span:nth-child(6) {
    transform: rotate(330deg) translate(31px, -6px) rotate(-330deg) !important;
  }

  .pointer {
    top: 10px !important;
    border-right-width: 12px !important;
    border-left-width: 12px !important;
    border-top-width: 24px !important;
  }

  .court,
  .football-field,
  .hover-field {
    height: min(62vw, 240px) !important;
    margin: 10px 0 !important;
    border-radius: 14px !important;
  }

  .goal-net,
  .hover-goal {
    top: 22px !important;
    width: min(48vw, 150px) !important;
    height: min(24vw, 76px) !important;
  }

  .goalkeeper {
    top: min(25vw, 86px) !important;
  }

  .football-ball,
  .hover-ball,
  .ball {
    width: 36px !important;
    height: 36px !important;
  }

  .hover-blocker {
    top: min(33vw, 112px) !important;
    width: 62px !important;
  }

  .skill-meter {
    height: 20px !important;
    margin: -2px 0 10px !important;
    border-width: 2px !important;
  }

  .skill-meter i {
    width: 13px !important;
    height: 28px !important;
    border-width: 2px !important;
  }

  .album-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .album-summary div {
    padding: 8px 4px !important;
  }

  .album-summary span {
    font-size: 0.52rem !important;
  }

  .album-summary strong {
    font-size: 0.9rem !important;
  }

  .album-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    max-height: 58vh !important;
  }

  .album-card {
    min-height: 104px !important;
    border-radius: 10px !important;
    padding: 9px !important;
  }

  .album-card strong {
    font-size: 0.74rem !important;
  }
}