/* Ultimate Stars stylesheet 3.
   Original style id: us-onboarding-feedback-styles.
   Keep file order stable unless you are intentionally changing the cascade. */
  .us-onboarding-overlay {
    position: fixed;
    inset: 0;
    z-index: 9800;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(3, 5, 14, .78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .us-onboarding-overlay.active { display: flex; }
  .us-onboarding-window {
    width: min(620px, calc(100vw - 28px));
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,.16);
    background:
      radial-gradient(circle at 18% 8%, rgba(255, 57, 111, .18), transparent 34%),
      radial-gradient(circle at 82% 10%, rgba(103, 232, 249, .14), transparent 32%),
      linear-gradient(145deg, rgba(19, 23, 44, .98), rgba(8, 10, 22, .98));
    color: #fff;
    box-shadow: 0 30px 90px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.10);
    padding: 26px;
  }
  .us-onboarding-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(255, 209, 102, .30);
    background: rgba(255, 209, 102, .10);
    color: #ffe2a0;
    font-size: 12px;
    font-weight: 1000;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 14px;
  }
  .us-onboarding-title {
    margin: 0;
    font-size: clamp(36px, 5vw, 64px);
    line-height: .9;
    letter-spacing: -.065em;
    text-transform: uppercase;
  }
  .us-onboarding-copy {
    margin: 13px 0 18px;
    color: rgba(232, 238, 255, .74);
    font-weight: 750;
    line-height: 1.55;
  }
  .us-onboarding-steps {
    display: grid;
    gap: 10px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
  }
  .us-onboarding-steps li {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 12px;
    align-items: start;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.055);
    padding: 12px;
  }
  .us-onboarding-step-no {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #ff3d71, #ffd166);
    color: #170711;
    font-weight: 1000;
    box-shadow: 0 12px 24px rgba(255,61,113,.20);
  }
  .us-onboarding-steps strong {
    display: block;
    margin-bottom: 3px;
    font-size: 15px;
  }
  .us-onboarding-steps span {
    display: block;
    color: rgba(232,238,255,.66);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 700;
  }

  .us-onboarding-steps .us-onboarding-step-no {
    display: grid;
    place-items: center;
    align-items: center;
    justify-items: center;
    color: #170711;
    font-size: 14px;
    line-height: 1;
    text-align: center;
  }
  .us-onboarding-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }
  .us-onboarding-button {
    min-height: 46px;
    border: 0;
    border-radius: 16px;
    padding: 0 20px;
    background: linear-gradient(135deg, #ff3d71, #ffd166);
    color: #160711;
    font-weight: 1000;
    cursor: pointer;
    box-shadow: 0 16px 30px rgba(255,61,113,.22);
  }
  .us-onboarding-button:hover { transform: translateY(-1px); filter: brightness(1.04); }


    /* =========================================================
       Ultimate Stars v34.1 – Mobile & Tablet Final Patch
       - responsive layout pass for phone, iPad portrait/landscape
       - larger tap targets
       - battle screen playable by tapping cards, not only dragging
       - keeps desktop design untouched as much as possible
       ========================================================= */

    html,
    body {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden !important;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }

    body.us-mobile-ui {
      min-height: 100svh;
      overscroll-behavior-y: contain;
    }

    body.us-mobile-ui button,
    body.us-mobile-ui .btn,
    body.us-mobile-ui .menu-card,
    body.us-mobile-ui .game-card,
    body.us-mobile-ui .opening-pack-button,
    body.us-mobile-ui .starter-pack-button {
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }

    @supports (-webkit-touch-callout: none) {
      body.us-mobile-ui {
        min-height: -webkit-fill-available;
      }
    }

    @media (hover: none), (pointer: coarse) {
      .game-card.selectable:hover,
      #myCardsGrid .game-card.selected:hover,
      #deckScreen .slot.filled:hover .game-card {
        transform: none !important;
      }

      .menu-card:hover:not(:disabled),
      .btn:hover:not(:disabled),
      .duel-mode-cta:hover:not(:disabled) {
        transform: none !important;
      }

      .card-art.preview-active video.hover-preview-video {
        display: none !important;
      }
    }

    @media (max-width: 1180px) {
      .app {
        width: min(100%, calc(100% - 20px)) !important;
        padding: 14px 0 calc(26px + env(safe-area-inset-bottom)) !important;
      }

      .topbar {
        min-height: auto !important;
        padding: 10px 0 !important;
        gap: 10px !important;
        margin-bottom: 10px !important;
      }

      .brand strong {
        font-size: clamp(28px, 6vw, 48px) !important;
        line-height: .95 !important;
      }

      .brand span {
        font-size: 12px !important;
        line-height: 1.35 !important;
      }

      .nav-actions {
        gap: 8px !important;
      }

      .btn,
      .input,
      .select,
      .duel-mode-cta,
      .stat-choice-btn {
        min-height: 44px;
      }

      .panel {
        padding: clamp(12px, 2.2vw, 18px) !important;
        border-radius: 24px !important;
      }

      #startScreen .start-page {
        width: min(100%, calc(100% - 20px)) !important;
        gap: clamp(22px, 4vw, 42px) !important;
      }

      #startScreen .start-hero-card {
        min-height: clamp(390px, 54vh, 560px) !important;
        padding: clamp(22px, 4vw, 38px) !important;
        border-radius: 28px !important;
      }

      #startScreen .start-main-title {
        font-size: clamp(38px, 8vw, 78px) !important;
      }

      #startScreen .start-info-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
      }

      #startScreen .start-info-card {
        min-height: 132px !important;
        padding: 16px !important;
      }

      #startScreen .start-faq-model-row .start-faq-section {
        width: 100% !important;
      }

      #homeScreen .home-menu-stage {
        min-height: auto !important;
        align-content: start !important;
        padding-top: 4px !important;
      }

      #homeScreen .home-menu-with-tasks {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
        width: 100% !important;
      }

      #homeScreen .home-menu-with-tasks .home-menu-grid,
      #homeScreen .home-menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
      }

      #homeScreen .home-menu-with-tasks .menu-card,
      #homeScreen .menu-card {
        min-height: clamp(145px, 22vw, 190px) !important;
        padding: clamp(16px, 2.3vw, 22px) !important;
        border-radius: 24px !important;
      }

      #homeScreen .menu-card strong {
        max-width: 78% !important;
        font-size: clamp(22px, 4vw, 32px) !important;
      }

      #homeScreen .menu-card span {
        font-size: 13px !important;
        line-height: 1.32 !important;
      }

      .home-task-panel {
        width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
      }

      .mode-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        justify-content: stretch !important;
      }

      .duel-mode-card {
        min-height: clamp(260px, 40vw, 340px) !important;
        background-position: center center !important;
      }

      .duel-mode-content {
        width: min(540px, 64%) !important;
        min-height: clamp(260px, 40vw, 340px) !important;
        padding: clamp(22px, 4vw, 38px) !important;
      }

      #duelSetup .duel-setup-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
      }

      #duelSetup .duel-setup-preview {
        width: 100% !important;
      }

      .league-side-panel {
        width: 100% !important;
        max-width: none !important;
      }

      .deck-summary-board {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }

      .deck-status-card {
        grid-column: 1 / -1;
      }

      #deckScreen .panel::before {
        inset: 104px 12px 66px !important;
        border-radius: 26px !important;
      }

      #deckScreen .deck-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        max-width: 760px !important;
        gap: 24px 16px !important;
        margin-top: 18px !important;
      }

      #deckScreen .slot {
        width: min(28vw, 210px) !important;
      }

      #deckScreen .deck-actions {
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
      }

      .filters {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(170px, .42fr) minmax(170px, .42fr) !important;
        gap: 10px !important;
      }

      .input,
      .select {
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
      }

      .card-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
        gap: 12px !important;
      }

      .small-card-grid {
        grid-template-columns: repeat(3, minmax(96px, 1fr)) !important;
        gap: 10px !important;
      }

      .shop-pack-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
      }

      .starter-pack-card,
      .pack-rule-list,
      .shop-empty-note {
        width: 100% !important;
      }

      .pack-opening-stage {
        min-height: clamp(360px, 60vh, 560px) !important;
      }

      .opening-pack-button {
        width: min(260px, 58vw) !important;
      }

      .modal {
        padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
        align-items: stretch !important;
      }

      .modal-shell,
      .collection-shell,
      .duel-shell,
      .start-legal-shell {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100svh - 16px) !important;
        padding: clamp(12px, 2.4vw, 18px) !important;
        border-radius: 22px !important;
      }

      .collection-list {
        max-height: calc(100svh - 210px) !important;
      }

      .duel-stage {
        grid-template-columns: minmax(150px, .8fr) minmax(220px, 1fr) minmax(150px, .8fr) !important;
        gap: 10px !important;
      }

      .duel-simple-card {
        width: min(180px, 100%) !important;
      }

      .duel-score {
        padding: 12px !important;
      }

      .duel-score strong {
        font-size: clamp(34px, 6vw, 58px) !important;
      }

      .duel-video-area video {
        max-height: 230px !important;
      }

      body.battle-active .battle-screen,
      .battle-screen {
        min-height: calc(100svh - 22px) !important;
        grid-template-rows: auto minmax(0, 1fr) auto auto !important;
        gap: 10px !important;
      }

      body.battle-active .enemy-row,
      body.battle-active .player-row,
      .enemy-row,
      .player-row {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 9px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 2px 2px 8px !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
      }

      .enemy-card-back {
        flex: 0 0 clamp(78px, 13vw, 118px) !important;
        min-height: clamp(105px, 17vw, 155px) !important;
        scroll-snap-align: center;
      }

      .battle-hand-card {
        flex: 0 0 clamp(88px, 14vw, 132px) !important;
        scroll-snap-align: center;
      }

      body.battle-active .battle-bottom,
      .battle-bottom {
        min-height: 0 !important;
        padding: 8px !important;
        border-radius: 22px !important;
      }

      body.battle-active .battle-bottom .game-card,
      .battle-bottom .game-card {
        width: 100% !important;
        max-width: clamp(82px, 14vw, 128px) !important;
      }

      body.battle-active .battle-arena,
      .battle-arena {
        grid-template-columns: minmax(170px, 1fr) minmax(142px, 210px) minmax(170px, 1fr) !important;
        gap: 10px !important;
        padding: 8px !important;
        align-items: center !important;
        overflow: visible !important;
      }

      body.battle-active .drop-zone,
      .drop-zone {
        width: 100% !important;
        min-height: 0 !important;
        height: clamp(220px, 34vh, 315px) !important;
        max-height: 315px !important;
        padding: 7px !important;
        border-radius: 22px !important;
      }

      body.battle-active .drop-zone .game-card,
      .drop-zone .game-card {
        max-width: clamp(132px, 19vw, 190px) !important;
      }

      body.battle-active .battle-match-score,
      .battle-match-score {
        min-width: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: clamp(130px, 23vh, 190px) !important;
        max-width: none !important;
        padding: 12px !important;
        border-radius: 22px !important;
      }

      body.battle-active .battle-match-score > div:last-child strong {
        font-size: clamp(40px, 7vw, 70px) !important;
      }

      .surrender-btn {
        position: static !important;
        width: min(340px, 100%) !important;
        margin: 0 auto !important;
        transform: none !important;
        min-height: 44px !important;
      }
    }

    @media (max-width: 760px) {
      .app {
        width: 100% !important;
        padding: 10px 10px calc(20px + env(safe-area-inset-bottom)) !important;
      }

      .topbar,
      .page-head {
        flex-direction: column !important;
        align-items: stretch !important;
      }

      .nav-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
      }

      .nav-actions .btn,
      .deck-actions .btn,
      .duel-setup-actions .btn,
      .result-actions .btn {
        width: 100% !important;
        min-width: 0 !important;
      }

      #startScreen .start-page {
        width: 100% !important;
      }

      #startScreen .start-hero-card {
        min-height: 470px !important;
        background-position: center top !important;
      }

      #startScreen .start-main-title {
        font-size: clamp(34px, 12vw, 58px) !important;
        letter-spacing: -.05em !important;
      }

      #startScreen .start-byline {
        display: inline-block !important;
        margin-top: 8px !important;
        font-size: .42em !important;
      }

      #startScreen .start-mature-notice {
        padding: 12px !important;
        border-radius: 18px !important;
      }

      #startScreen .start-info-grid {
        grid-template-columns: 1fr !important;
      }

      #startScreen .start-showcase-image {
        width: 112% !important;
        max-width: none !important;
        margin-left: -6% !important;
      }

      #startScreen .start-faq-model-row .start-faq-section {
        width: 100% !important;
      }

      #startScreen .start-footer-left {
        gap: 8px !important;
      }

      #startScreen .start-footer-link {
        flex: 1 1 calc(50% - 8px) !important;
        text-align: center !important;
      }

      #homeScreen .home-menu-with-tasks .home-menu-grid,
      #homeScreen .home-menu-grid {
        grid-template-columns: 1fr !important;
      }

      #homeScreen .home-menu-with-tasks .menu-card,
      #homeScreen .menu-card {
        min-height: 132px !important;
      }

      #homeScreen .menu-card strong {
        font-size: clamp(24px, 8vw, 34px) !important;
      }

      .duel-mode-card {
        min-height: 330px !important;
      }

      .duel-mode-content {
        width: 100% !important;
        min-height: 330px !important;
        padding: 150px 20px 22px !important;
      }

      .duel-mode-title {
        font-size: clamp(40px, 14vw, 60px) !important;
      }

      .duel-mode-cta {
        width: 100% !important;
      }

      #duelSetup .duel-setup-actions,
      .result-actions,
      .stat-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
      }

      .deck-summary-board {
        grid-template-columns: 1fr !important;
      }

      .deck-status-card,
      .deck-metric-card {
        min-height: 78px !important;
        padding: 13px 14px !important;
        border-radius: 18px !important;
      }

      #deckScreen .panel::before {
        display: none !important;
      }

      #deckScreen .deck-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        max-width: 430px !important;
        gap: 24px 12px !important;
        margin-bottom: 22px !important;
      }

      #deckScreen .slot {
        width: min(43vw, 178px) !important;
        border-radius: 18px !important;
      }

      #deckScreen .slot::before {
        bottom: -16px !important;
        font-size: 9px !important;
      }

      #deckScreen .deck-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
      }

      .filters {
        grid-template-columns: 1fr !important;
      }

      .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
      }

      #myCardsGrid,
      #allCardsGrid {
        padding: 6px 2px 10px !important;
      }

      .game-card.selected::after,
      #myCardsGrid .game-card.selected::after {
        top: 4px !important;
        right: 4px !important;
        width: 30px !important;
        height: 30px !important;
        font-size: 16px !important;
      }

      .collection-list {
        max-height: calc(100svh - 245px) !important;
        padding-right: 0 !important;
      }

      .modal-head {
        gap: 10px !important;
        align-items: stretch !important;
      }

      .modal-head strong {
        font-size: clamp(24px, 8vw, 34px) !important;
      }

      .stat-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }

      .duel-stage {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
      }

      .duel-center {
        order: -1 !important;
      }

      .duel-card-frame {
        width: 100% !important;
        padding: 8px !important;
      }

      .duel-simple-card {
        width: min(185px, 56vw) !important;
      }

      .duel-video-area video {
        max-height: 190px !important;
      }

      .pack-opening-stage {
        min-height: 420px !important;
      }

      .pulled-cards {
        transform: scale(.92) !important;
        transform-origin: center !important;
      }

      body.battle-active .battle-screen,
      .battle-screen {
        min-height: calc(100svh - 20px) !important;
        grid-template-rows: auto auto auto auto !important;
        gap: 8px !important;
      }

      body.battle-active .battle-top,
      .battle-top {
        min-height: 0 !important;
      }

      body.battle-active .battle-arena,
      .battle-arena {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas:
          "score score"
          "player cpu" !important;
        gap: 8px !important;
        padding: 0 !important;
      }

      #battleScoreCenter {
        grid-area: score !important;
      }

      #playerDropZone {
        grid-area: player !important;
      }

      #cpuDropZone {
        grid-area: cpu !important;
      }

      body.battle-active .battle-match-score,
      .battle-match-score {
        min-height: 108px !important;
        padding: 10px !important;
      }

      body.battle-active .battle-match-round-title {
        font-size: clamp(18px, 6vw, 26px) !important;
      }

      body.battle-active .battle-match-special {
        font-size: 11px !important;
        padding: 8px 10px !important;
      }

      body.battle-active .battle-match-score > div:last-child strong {
        font-size: clamp(34px, 12vw, 54px) !important;
      }

      body.battle-active .drop-zone,
      .drop-zone {
        height: clamp(174px, 35vw, 230px) !important;
        max-height: 230px !important;
        padding: 6px !important;
        border-radius: 18px !important;
      }

      body.battle-active .drop-zone .game-card,
      .drop-zone .game-card {
        max-width: min(118px, 38vw) !important;
      }

      .drop-empty {
        font-size: 11px !important;
        line-height: 1.28 !important;
        padding: 0 4px !important;
      }

      .enemy-card-back {
        flex-basis: 72px !important;
        min-height: 96px !important;
        border-radius: 13px !important;
      }

      .battle-hand-card {
        flex-basis: 82px !important;
      }

      body.battle-active .battle-bottom .game-card,
      .battle-bottom .game-card {
        max-width: 80px !important;
      }

      .battle-card-type-chip {
        font-size: 8px !important;
        padding: 4px 5px !important;
      }

      .surrender-btn {
        width: 100% !important;
      }
    }

    @media (max-width: 430px) {
      .app {
        padding-left: 8px !important;
        padding-right: 8px !important;
      }

      .nav-actions {
        grid-template-columns: 1fr !important;
      }

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

      #deckScreen .slot {
        width: min(42vw, 156px) !important;
      }

      .enemy-card-back {
        flex-basis: 66px !important;
        min-height: 88px !important;
      }

      .battle-hand-card {
        flex-basis: 76px !important;
      }

      body.battle-active .battle-bottom .game-card,
      .battle-bottom .game-card {
        max-width: 74px !important;
      }

      body.battle-active .drop-zone,
      .drop-zone {
        height: 168px !important;
      }

      body.battle-active .drop-zone .game-card,
      .drop-zone .game-card {
        max-width: 104px !important;
      }
    }

    @media (max-height: 760px) and (orientation: landscape) and (max-width: 1180px) {
      .app {
        padding-top: 8px !important;
      }

      .topbar {
        padding: 6px 0 !important;
      }

      body.battle-active .battle-screen,
      .battle-screen {
        min-height: calc(100svh - 16px) !important;
        gap: 6px !important;
      }

      body.battle-active .battle-arena,
      .battle-arena {
        grid-template-columns: minmax(150px, 1fr) minmax(118px, 170px) minmax(150px, 1fr) !important;
        grid-template-areas: none !important;
      }

      body.battle-active .battle-match-score,
      .battle-match-score {
        min-height: 100px !important;
        padding: 8px !important;
      }

      body.battle-active .drop-zone,
      .drop-zone {
        height: clamp(160px, 37vh, 230px) !important;
      }

      .enemy-card-back {
        flex-basis: 64px !important;
        min-height: 84px !important;
      }

      .battle-hand-card {
        flex-basis: 72px !important;
      }

      body.battle-active .battle-bottom .game-card,
      .battle-bottom .game-card {
        max-width: 70px !important;
      }
    }