/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 600px) {
  #main-layout { grid-template-columns: 1fr 76px 150px; grid-template-rows: auto 1fr; }
  .btn { padding: .42rem .75rem; font-size: .78rem; }
}
@media (min-width: 640px) {
  #main-layout { grid-template-columns: 1fr 84px 180px; grid-template-rows: auto 1fr; }
  .cat-btn { width: 60px; height: 60px; font-size: .62rem; }
  .cat-btn .cat-icon { font-size: 1.5rem; }
}
@media (min-width: 860px) {
  #main-layout { grid-template-columns: 1fr 96px 220px; grid-template-rows: auto 1fr; }
  .game-title { font-size: 1.2rem; }
  .btn { padding: .48rem .95rem; font-size: .82rem; }
  .cat-btn { font-size: .65rem; }
}
@media (min-width: 1100px) {
  #main-layout { grid-template-columns: 1fr 108px 260px; grid-template-rows: auto 1fr; }
}

/* ── Большие экраны / 4K ── */
@media (min-width: 1600px) {
  /* Context hints */
  .ctx-hint { font-size: .73rem; max-width: 195px; padding: .45rem .8rem; }

  /* Intro is handled in the main section */

  /* Share camera & Random button */
  .btn-share-stage, .stage-controls-left button { width: 38px; height: 38px; font-size: 1.1rem; }
}

/* Intro is handled in the main section */

/* Mobile landscape */
@media (max-height: 480px) and (orientation: landscape) {
  #stage { height: 88%; }
  #game-header { padding: .3rem .7rem; }
  .game-title { font-size: .85rem; }
}

/* ============================================================
   МОБИЛЬНЫЙ / ВСТРОЕННЫЙ ЛАНДШАФТ
   Яндекс.Игры могут отдавать игре урезанный viewport из-за рекламы,
   поэтому ориентируемся не только на высоту, но и на доступную ширину.
   ============================================================ */
@media (orientation: landscape) and (max-width: 1024px),
       (orientation: landscape) and (max-height: 620px) {

  /* ── Шапка: компактная ── */
  #game-header {
    padding: .18rem .5rem;
    flex-wrap: nowrap;
  }
  .game-title {
    font-size: .72rem;
    letter-spacing: 0;
  }
  .header-buttons { gap: .22rem; }
  #game-header { min-width: 0; }
  .game-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .header-buttons {
    flex: 0 0 auto;
    margin-left: .35rem;
  }
  .btn {
    padding: .22rem .45rem;
    font-size: .65rem;
    border-radius: 99px;
  }
  .stars-btn {
    font-size: .75rem;
    padding: .28rem .55rem;
    min-height: 34px;
  }
  .btn-runway-main {
    font-size: .75rem;
    padding: .28rem .7rem;
    min-height: 34px;
  }
  .btn-sound {
    padding: .28rem .52rem;
    font-size: .95rem;
    min-height: 34px;
  }
  .btn {
    min-height: 34px;
  }

  /* ── Баннер задания: однострочный ── */
  #banner-inner { min-width: 0; font-size: .65rem; gap: .35rem; flex-wrap: nowrap; }
  #banner-task {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #banner-tags  { display: none; }

  /* ── Главный лейаут: категории шире, панель вещей шире ── */
  #main-layout {
    display: grid !important;
    flex-direction: initial !important;
    grid-template-columns: minmax(0, 1fr) clamp(48px, 8vw, 70px) clamp(120px, 23vw, 180px) !important;
    grid-template-rows: auto 1fr !important;
    min-height: 0;
  }
  #stage-wrap {
    grid-row: 1 / 3 !important;
    grid-column: 1 !important;
  }
  #panel-controls {
    grid-row: 1 !important;
    grid-column: 2 / 4 !important;
    display: flex !important;
    position: static !important;
    padding: .35rem .5rem !important;
    background: linear-gradient(90deg, var(--sec-a1), var(--main-1)) !important;
    border-bottom: 3px solid rgba(168, 85, 247, 0.28) !important;
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.1) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    z-index: 5 !important;
  }
  .items-sidebar {
    grid-row: 2 !important;
    grid-column: 2 / 4 !important;
    min-width: 0 !important;
    background: rgba(248, 240, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-left: none !important;
    border: 1px solid var(--main-4) !important;
    box-shadow: 0 8px 32px rgba(139, 63, 199, 0.08) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .sidebar-split-layout {
    display: flex !important;
    flex-direction: row !important;
    height: 100% !important;
    width: 100% !important;
  }


  /* ── Панель категорий: скрыть лейбл, крупные кнопки ── */
  #category-panel {
    order: initial !important;
    width: clamp(48px, 8vw, 70px) !important;
    height: 100% !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: .35rem .25rem !important;
    gap: .55rem !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: 2px solid rgba(228, 174, 252, 0.5) !important;
    background: linear-gradient(to bottom, #e4aefc00, var(--main-4)) !important;
    backdrop-filter: none !important;
    touch-action: pan-y !important;
  }

  #category-list {
    flex-direction: column !important;
    gap: .55rem !important;
    width: 100% !important;
  }
  .category-item-label {
    display: none !important;
  }
  .category-item, .cat-btn {
    width: clamp(38px, 6.5vw, 56px) !important;
    height: clamp(38px, 6.5vw, 56px) !important;
    border-radius: 10px !important;
    font-size: .52rem !important;
    box-shadow: 0px 2px 0px #DDD6FE, 0px 3px 6px rgba(124, 58, 237, 0.1) !important;
  }
  .category-item.active, .cat-btn.active {
    box-shadow: 0px 2px 0px var(--purple), 0px 4px 8px rgba(124, 58, 237, 0.25) !important;
    border-color: var(--purple) !important;
  }
  .category-icon, .cat-icon { font-size: 1.35rem !important; }


  /* ── Сцена: заполняет высоту ── */
  #stage-wrap {
    order: initial;
    min-width: 0;
    min-height: 0;
    width: auto;
    padding-bottom: 1%;
    align-items: center;
    justify-content: flex-end;
  }
  #stage { height: 92%; }

  /* ── Панель предметов: шире, нормальные карточки ── */
  #items-panel {
    order: initial !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-left: none !important;
    padding: .3rem .35rem !important;
    background: transparent !important;
    backdrop-filter: none !important;
    flex-grow: 1 !important;
    height: 100% !important;
  }

  #items-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: .3rem;
  }
  .item-card {
    padding: .25rem .2rem .18rem;
    gap: .13rem;
    border-radius: 8px;
  }
  .item-card .item-name { font-size: .52rem; }
  .item-cost-badge, .item-deal-badge,
  .item-ad-badge, .item-review-badge {
    font-size: .5rem;
    padding: .1rem .3rem;
    bottom: 4px;
  }

  /* ── Buy bar ── */
  .buy-bar { padding: .5rem .6rem .8rem; }
  .buy-bar-name { font-size: .78rem; }
  .buy-bar-btn { font-size: .72rem; padding: .35rem .7rem; min-height: 36px; }
  .buy-bar-gem-hint { font-size: .65rem; padding: .25rem .5rem; margin-top: .28rem; }

  /* ── Sub-tabs ── */
  .sub-tabs { padding-bottom: .25rem; gap: .2rem; }
  .sub-tab-btn { font-size: .6rem; padding: .2rem .3rem; }

  /* ── Спарклы ── */
  .sparkle { font-size: .8rem; }

  /* ── Модальные окна: уже, скролл ── */
  .modal-box {
    max-height: 92vh;
    padding: .7rem .9rem .9rem;
    border-radius: 14px;
    overflow-y: auto;
    gap: .4rem;
  }
  .modal-overlay { align-items: center; }

  /* Score modal — максимально компактно для ландшафта */
  .score-box {
    max-width: 94vw;
    max-height: 96vh;
    height: 94vh;
  }
  .score-left-col {
    width: auto !important;
    flex-shrink: 0 !important;
    padding: 0.5rem !important;
    gap: 4px !important;
  }
  .score-left-col .instagram-post {
    height: 86vh !important;
    max-height: 86vh !important;
    width: calc((86vh - 170px) * 768 / 1376) !important;
    max-width: 100% !important;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
  }
  body:not(.is-mobile) .score-left-col .instagram-post {
    width: 320px !important;
  }
  body.is-mobile .score-left-col .instagram-post {
    width: calc(86vh * 768 / 1376) !important;
    position: relative !important;
  }
  body.is-mobile .score-left-col .instagram-media-container {
    height: 100% !important;
    width: 100% !important;
  }
  body.is-mobile .score-left-col .social-post-image-container {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
  }
  body.is-mobile .score-left-col .instagram-actions-left-row {
    display: none !important;
  }
  body.is-mobile .score-left-col .instagram-comments-container-left {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    z-index: 10 !important;
    background: transparent !important;
  }
  body.is-mobile .score-left-col .instagram-comments-container-left .score-comment-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: #ffffff !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 0 0 12px 12px !important;
    min-height: auto !important;
    padding: 6px 2px !important;
  }
  body.is-mobile .score-left-col .instagram-comments-container-left .score-comment-arrow {
    color: rgba(255, 255, 255, 0.7) !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 0 2px !important;
    font-size: 1.8rem !important;
  }
  body.is-mobile .score-left-col .instagram-comments-container-left .score-comment-arrow:hover {
    color: #ffffff !important;
  }
  body.is-mobile .score-left-col .instagram-comments-container-left .score-comment-main {
    align-items: center !important;
    gap: 6px !important;
  }
  body.is-mobile .score-left-col .instagram-comments-container-left .score-comment-avatar {
    width: 24px !important;
    height: 24px !important;
    padding: 1px !important;
  }
  body.is-mobile .score-left-col .instagram-comments-container-left .score-comment-nick {
    display: block !important;
    color: #fbbf24 !important;
    font-size: 0.6rem !important;
    margin-right: 0 !important;
    margin-bottom: 2px !important;
    line-height: 1 !important;
  }
  body.is-mobile .score-left-col .instagram-comments-container-left .score-comment-text {
    color: rgba(255, 255, 255, 0.95) !important;
    display: block !important;
  }
  body.is-mobile .score-left-col .instagram-comments-container-left .score-comment-text-block {
    font-size: 0.65rem !important;
    line-height: 1.15 !important;
  }
  body.is-mobile .score-left-col .instagram-comments-container-left .score-comment-actions-row {
    display: none !important;
  }

  .score-right-col {
    padding: 0.6rem 0.8rem !important;
    gap: 0.3rem !important;
    justify-content: center;
  }
  .social-results-block {
    gap: 2px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .score-status-title {
    font-size: 0.85rem !important;
    margin: 2px auto 4px auto !important;
  }
  .score-large-score {
    font-size: 1.6rem !important;
    margin: 0 auto 4px auto !important;
  }
  .score-breakdown {
    padding: 6px 10px !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    gap: 4px !important;
    border-radius: 8px !important;
  }
  .score-breakdown-row {
    font-size: 0.7rem !important;
    gap: 6px !important;
  }
  .breakdown-icon {
    width: 18px !important;
    height: 18px !important;
  }
  .breakdown-value, #score-items-value {
    font-size: 0.75rem !important;
  }
  .score-rewards-block {
    gap: 6px !important;
    margin-bottom: 2px !important;
  }
  .score-reward-item {
    padding: 4px 8px !important;
    font-size: 0.7rem !important;
    border-radius: 6px !important;
    gap: 4px !important;
  }
  .reward-icon {
    width: 14px !important;
    height: 14px !important;
  }
  .score-actions-row {
    gap: 4px !important;
  }
  .score-actions-row-sub {
    gap: 4px !important;
  }
  .score-actions-row .score-btn {
    padding: 0.35rem 0.6rem !important;
    font-size: 0.72rem !important;
  }
  .btn-share-outfit {
    padding: 0.35rem 0.6rem !important;
    font-size: 0.72rem !important;
  }





  /* Shop */
  .shop-box   { max-width: 740px; width: 96%; max-height: 95vh; overflow-y: auto; }
  .shop-header { padding: .45rem 1rem; font-size: .85rem; }
  .shop-subtitle { padding: .2rem 1rem .15rem; font-size: .68rem; }
  #shop-packages { padding: .4rem .8rem .6rem; gap: .4rem; }
  .shop-grid { grid-template-columns: repeat(1, 1fr); gap: .45rem; }
  .shop-card {
    padding: .65rem .3rem .55rem;
    border-radius: 12px;
    min-height: 195px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
  }
  .shop-card-badge { top: -9px; font-size: .52rem; padding: .1rem .38rem; }
  .shop-card-icon-container {
    width: 100%;
    height: 6.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto .15rem;
  }
  .shop-card-icon-img {
    height: 5.8rem;
    max-width: 100%;
    object-fit: contain;
    display: block;
  }
  .shop-card-stars { font-size: .78rem; margin-bottom: .08rem; }
  .shop-card-bonus { font-size: .58rem; margin-bottom: .18rem; min-height: .75rem; line-height: .75rem; }
  .shop-card-price {
    font-size: .7rem; padding: .2rem .52rem;
    width: 90%;
    max-width: 100px;
    text-align: center;
  }
  .shop-ad-card    { padding: .4rem .65rem; gap: .4rem; border-radius: 10px; }
  .shop-ad-icon-img { width: 1.8rem; height: 1.8rem; }
  .shop-ad-text    { font-size: .72rem; }
  .shop-ad-btn     { font-size: .65rem; padding: .18rem .5rem; }



  /* Toasts */
  .game-toast       { font-size: .72rem; padding: .3rem .65rem; top: 6px; }


  /* Context hints — smaller on mobile */
  .ctx-hint { font-size: .72rem; padding: .4rem .75rem; max-width: 180px; }



  /* Intro is handled in the main section */


}

/* Очень маленькие и узкие ландшафты (напр. Galaxy Fold) */
@media (max-height: 360px) and (max-width: 600px) and (orientation: landscape) {
  .game-title {
    display: block;
    font-size: .58rem;
    max-width: 150px;
  }
  #main-layout   { grid-template-columns: 1fr 42px 115px !important; }
  #category-panel { width: 42px !important; }
  .cat-btn       { width: 34px; height: 34px; }
  .cat-btn .cat-icon { font-size: .95rem; }
  .cat-btn .cat-icon svg, .cat-btn .cat-icon img { width: 14px; height: 14px; }

  #stage         { height: 94%; }
  .btn           { padding: .18rem .35rem; font-size: .6rem; }
}

@media (max-width: 540px) {
  #btn-double-reward:not(.hidden) ~ #btn-share-score #btn-share-score-label {
    display: none;
  }
  #btn-double-reward:not(.hidden) ~ #btn-share-score svg {
    margin-right: 0 !important;
  }
}

/* ============================================================
   MOBILE PORTRAIT — stage first, swipeable wardrobe below
   ============================================================ */
@media (max-width: 768px) and (orientation: portrait) {
  #game {
    height: 100svh;
    height: 100dvh;
    min-height: 100svh;
    min-height: 100dvh;
  }

  #main-layout {
    display: flex !important;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    flex-direction: column;
  }

  #stage-wrap {
    order: 1;
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    padding: max(0.35rem, env(safe-area-inset-top)) 0 0;
    justify-content: flex-end;
  }

  #stage {
    --char-y: 10px;
    height: min(86%, calc(100vw * 1.42));
    max-height: none;
  }

  #panel-controls {
    order: 2;
    display: flex !important;
    position: static !important;
    width: 100%;
    min-height: 52px;
    padding: .4rem max(.65rem, env(safe-area-inset-left)) !important;
    background: linear-gradient(90deg, var(--sec-a1), var(--main-1)) !important;
    border-bottom: 2px solid rgba(168, 85, 247, .28) !important;
  }

  .panel-controls-inner {
    width: 100%;
    justify-content: center !important;
  }

  .btn-runway-main.runway-style-minimal {
    min-height: 42px !important;
    padding: .45rem 1rem !important;
    font-size: .88rem !important;
  }

  .items-sidebar {
    order: 3;
    width: 100% !important;
    height: auto !important;
    min-height: 0;
    max-height: min(36svh, 300px);
    flex: 0 0 auto;
    grid-row: auto !important;
    grid-column: auto !important;
    border: 0 !important;
    border-top: 2px solid rgba(228, 174, 252, .78) !important;
    border-radius: 0 !important;
    box-shadow: 0 -8px 22px rgba(139, 63, 199, .12) !important;
    overflow: hidden !important;
  }

  .sidebar-split-layout {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    max-height: inherit;
  }

  #category-panel {
    order: 1 !important;
    box-sizing: border-box;
    width: 100% !important;
    height: 66px !important;
    min-height: 66px;
    padding: .4rem .45rem !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
    border: 0 !important;
    background: linear-gradient(180deg, rgb(228 174 252), rgb(255 255 255 / 0%)) !important;
    touch-action: manipulation !important;
    scrollbar-width: none;
  }

  #category-panel::-webkit-scrollbar { display: none; }

  #category-list {
    width: 100% !important;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between;
    gap: clamp(2px, 1.2vw, 8px) !important;
  }

  .category-item-wrapper {
    width: auto;
    min-width: 0;
    max-width: 48px;
    flex: 1 1 0;
  }

  .category-item, .cat-btn {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 48px;
    min-width: 0;
    height: auto !important;
    aspect-ratio: 1;
    margin-inline: auto;
    border-radius: 14px !important;
  }

  .category-item.active, .cat-btn.active {
    transform: translateY(-2px) !important;
  }

  .category-icon, .cat-icon { font-size: 1.35rem !important; }
  .category-item-label { display: none !important; }

  #category-panel > .btn-share-stage { display: none !important; }

  #items-panel {
    order: 2 !important;
    position: relative;
    height: auto !important;
    min-height: 0;
    padding: .4rem .65rem calc(.55rem + env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }

  .sub-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 0 0 .35rem;
    scrollbar-width: none;
  }

  .sub-tabs::-webkit-scrollbar { display: none; }
  .sub-tab-btn { flex: 0 0 auto; min-height: 34px; }

  .items-grid-container {
    overflow: hidden !important;
    padding: 0 !important;
    flex: 0 0 auto;
  }

  #items-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: 100%;
    flex: 0 0 auto;
    gap: .55rem;
    padding: .1rem .05rem .4rem;
    touch-action: pan-x !important;
    scrollbar-width: none;
  }

  #items-grid::-webkit-scrollbar { display: none; }

  .items-scroll-indicator {
    display: block !important;
    position: relative;
    flex: 0 0 6px;
    height: 6px;
    margin: .15rem .18rem 0;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(124, 58, 237, .2);
  }

  .items-scroll-indicator-thumb {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    min-width: 18%;
    border-radius: inherit;
    background: rgba(124, 58, 237, .78);
    box-shadow: 0 1px 3px rgba(91, 33, 143, .28);
    transition: transform .1s linear, width .1s ease;
  }

  .buy-bar {
    position: absolute;
    z-index: 40;
    left: .5rem;
    right: .5rem;
    bottom: calc(.5rem + env(safe-area-inset-bottom));
    padding: .75rem !important;
    border: 2px solid var(--purple-light);
    border-radius: 14px !important;
    box-shadow: 0 10px 28px rgba(91, 33, 143, .3);
    animation: buyDialogIn .18s ease-out;
  }

  .buy-bar-name { font-size: .82rem; }
  .buy-bar-ad-hint { font-size: .7rem; }
  .buy-bar-row { gap: .4rem; }
  .buy-bar-btn { min-height: 38px; padding: .4rem .65rem; font-size: .72rem; }
  .buy-cancel { min-width: 76px; }
  .buy-bar-gem-hint { min-height: 34px; font-size: .7rem; }

  @keyframes buyDialogIn {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .item-card {
    width: 88px;
    min-width: 88px;
    flex: 0 0 88px;
    padding: .35rem .28rem .28rem;
  }

  .item-card .item-name { font-size: .58rem; }

  .assignment-card {
    top: max(.45rem, env(safe-area-inset-top)) !important;
    left: .45rem !important;
    width: min(188px, calc(100% - 112px)) !important;
  }

  .stage-counters {
    top: max(.45rem, env(safe-area-inset-top)) !important;
    right: .45rem !important;
  }

  .stage-counters-bar { height: 32px !important; }
  .stage-counter-unit { font-size: .72rem !important; }

  .mobile-stage-btns.active {
    right: .55rem;
    bottom: .55rem;
    gap: .4rem;
  }

  .mobile-stage-btns .btn-share-stage {
    width: 38px !important;
    height: 38px !important;
    background: rgb(255 255 255 / 22%) !important;
  }

  .modal-overlay {
    align-items: center;
    padding: max(.55rem, env(safe-area-inset-top)) .55rem max(.55rem, env(safe-area-inset-bottom));
  }

  .modal-box {
    max-width: 100%;
    max-height: calc(100dvh - 1.1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y: auto;
  }

  .score-box {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(100dvh - 1.1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    flex-direction: column !important;
    overflow-y: auto !important;
  }

  .score-left-col, .score-right-col {
    width: 100% !important;
    min-width: 0;
  }

  .score-left-col .instagram-post {
    width: min(100%, 320px) !important;
    margin: 0 auto;
  }

  /* Portrait result: the post remains visible, while the earned result and
     the next-step controls live in a guaranteed second panel below it. */
  #score-modal {
    align-items: center;
  }

  .score-box {
    height: calc(100dvh - 1.1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    min-height: 0;
    overflow: hidden !important;
    gap: 0 !important;
  }

  .score-left-col {
    flex: 0 0 48% !important;
    min-height: 0;
    overflow: hidden;
    padding: .55rem .55rem .35rem !important;
    justify-content: center;
  }

  .score-left-col .instagram-post {
    height: 100%;
    max-height: 100%;
    min-height: 0;
  }

  .score-left-col .instagram-media-container {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
  }

  .score-left-col .social-post-image-container {
    height: 100%;
    max-height: none;
    min-height: 0;
    aspect-ratio: auto;
  }

  .score-left-col .instagram-actions-left-row {
    flex: 0 0 auto;
    padding: .35rem .6rem;
  }

  .score-right-col {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    padding: .55rem .75rem calc(.65rem + env(safe-area-inset-bottom)) !important;
    gap: .35rem !important;
    justify-content: flex-start;
  }

  .social-results-block {
    gap: .25rem !important;
    margin: 0 !important;
  }

  .score-status-title {
    font-size: 1rem;
    padding: .42rem .65rem;
  }

  .score-breakdown {
    padding: .48rem .7rem;
    gap: .2rem;
  }

  .score-breakdown-row {
    margin-top: 2px;
    font-size: .78rem;
  }

  .score-rank-section {
    margin: 0 !important;
  }

  .score-actions-row {
    gap: .35rem !important;
  }

  .score-actions-row .score-btn {
    min-height: 38px;
    padding: .45rem .7rem !important;
  }

  .shop-box {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 1.1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
  }

  .shop-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}







/* The portrait wardrobe uses its own always-visible scroll cue. */
.items-scroll-indicator {
  display: none;
}

/* ============================================================
   SCORE MODAL — MOBILE PORTRAIT SOCIAL POST
   The complete result fits in one viewport down to 360 × 640.
   ============================================================ */
@media (max-width: 768px) and (orientation: portrait) {
  #score-modal.modal-overlay {
    align-items: center !important;
    justify-content: center;
    padding: max(6px, env(safe-area-inset-top)) 0 max(6px, env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
    touch-action: none;
  }

  #score-modal .score-box {
    width: min(92vw, 720px) !important;
    max-width: min(92vw, 720px) !important;
    height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom))) !important;
    max-height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom))) !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(6px, 1.1dvh, 10px) !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #score-modal .score-left-col,
  #score-modal .score-right-col {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    box-sizing: border-box;
  }

  #score-modal .score-left-col {
    flex: 1 1 auto !important;
    height: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    justify-content: stretch !important;
    background: transparent !important;
  }

  #score-modal .score-left-col .instagram-post {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    border: 1.5px solid rgba(255, 255, 255, .62) !important;
    border-radius: clamp(15px, 4vw, 24px) !important;
    background: #fff !important;
    box-shadow: 0 12px 30px rgba(10, 3, 20, .42), 0 0 24px rgba(193, 104, 232, .2) !important;
    overflow: hidden !important;
  }

  #score-modal .instagram-media-container {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  #score-modal .social-post-image-container {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    background-position: center !important;
  }

  #score-modal .social-post-image-container #cloned-stage {
    width: auto !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
  }

  #score-modal .cloned-character-layers {
    transform: translateY(-1.2%) scale(.94) !important;
  }

  #score-modal .instagram-header-left {
    padding: clamp(9px, 2.3vw, 15px) clamp(10px, 3vw, 18px) !important;
    align-items: center;
  }

  #score-modal .instagram-avatar-left {
    width: clamp(34px, 10vw, 50px) !important;
    height: clamp(34px, 10vw, 50px) !important;
    margin-right: clamp(8px, 2.4vw, 13px) !important;
  }

  #score-modal .instagram-avatar-ring { padding: 2px; }
  #score-modal .instagram-author-left {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(.92rem, 4vw, 1.28rem) !important;
    font-weight: 800 !important;
  }
  #score-modal .instagram-verified-badge svg {
    width: clamp(14px, 4vw, 19px) !important;
    height: clamp(14px, 4vw, 19px) !important;
  }
  #score-modal .instagram-meta-dot,
  #score-modal .instagram-meta-time,
  #score-modal .instagram-location-left {
    display: none !important;
  }
  #score-modal .instagram-dots-left {
    display: none !important;
  }
  #score-modal .score-btn-download-mobile {
    display: flex !important;
    width: clamp(38px, 10.5vw, 46px) !important;
    height: clamp(38px, 10.5vw, 46px) !important;
    min-width: clamp(38px, 10.5vw, 46px) !important;
    min-height: clamp(38px, 10.5vw, 46px) !important;
    margin-left: auto;
  }
  #score-modal .score-btn-download-mobile svg {
    width: clamp(21px, 5.6vw, 25px) !important;
    height: clamp(21px, 5.6vw, 25px) !important;
  }

  #score-modal .score-result-mount-mobile {
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 54%, rgba(21, 8, 31, .06) 66%, rgba(21, 8, 31, .72) 100%);
  }

  #score-modal .score-result-details {
    position: absolute;
    left: clamp(10px, 4vw, 24px);
    right: clamp(10px, 4vw, 24px);
    bottom: clamp(7px, 1.6dvh, 15px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(3px, .65dvh, 7px);
    color: #fff;
  }

  #score-modal .score-status-title {
    width: auto !important;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Outfit', sans-serif;
    font-size: 0 !important;
    line-height: .95;
    font-weight: 900;
    letter-spacing: .02em;
    color: #f08bf1 !important;
    background: linear-gradient(180deg, #ffd0ff 0%, #e36be9 75%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 1px 1.5px rgba(67, 20, 84, .58)) drop-shadow(0 3px 5px rgba(20, 4, 29, .38));
  }

  #score-modal .score-status-title::before {
    content: attr(data-mobile-label);
    font-size: clamp(1.05rem, 5.8vw, 2rem);
  }

  #score-modal .score-status-title.visible {
    animation: scoreStatusBouncePortrait 1.5s ease-in-out infinite alternate .5s;
  }

  @keyframes scoreStatusBouncePortrait {
    from { transform: translateY(0) scale(1); }
    to { transform: translateY(-2px) scale(1.03); }
  }

  #score-modal .score-breakdown {
    position: relative;
    width: min(86%, 520px);
    height: clamp(76px, 10.5dvh, 86px);
    box-sizing: border-box;
    margin: clamp(30px, 5.2dvh, 46px) auto 0 !important;
    padding: clamp(6px, 1dvh, 8px) clamp(12px, 3.2vw, 18px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 1px minmax(0, 1fr);
    grid-template-areas:
      'items'
      'divider'
      'trend';
    gap: clamp(3px, .55dvh, 5px) !important;
    border: 1.5px solid rgba(236, 211, 255, .62) !important;
    border-radius: clamp(16px, 4.6vw, 25px) !important;
    background: linear-gradient(135deg, rgba(91, 50, 111, .58), rgba(44, 20, 61, .66)) !important;
    box-shadow: 0 6px 16px rgba(10, 3, 20, .2) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  #score-modal #score-row-items { grid-area: items; }
  #score-modal #score-row-trend { grid-area: trend; }
  #score-modal #score-reward-row { grid-area: total; }
  #score-modal .score-breakdown-divider {
    display: block !important;
    grid-area: divider;
    width: 100%;
    height: 1px;
    margin: 0 !important;
    background: rgba(236, 211, 255, .64) !important;
    border: 0;
    border-top: 1px dashed rgba(236, 211, 255, .72);
  }

  #score-modal #score-row-items,
  #score-modal #score-row-trend {
    min-width: 0;
    min-height: 0;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: 'icon label value';
    align-items: center;
    justify-content: initial !important;
    gap: clamp(4px, 1.5vw, 8px) !important;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #e8c6fa !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  #score-modal #score-row-items .breakdown-icon,
  #score-modal #score-row-trend .breakdown-icon { grid-area: icon; }
  #score-modal #score-items-label,
  #score-modal #score-trend-label { grid-area: label; }
  #score-modal #score-items-value,
  #score-modal #score-trend-value {
    grid-area: value;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(2px, .7vw, 5px);
    color: #f3dcff !important;
    font-weight: 900;
    white-space: nowrap;
  }
  #score-modal #score-items-value::after,
  #score-modal #score-trend-value::after {
    content: '';
    display: inline-block;
    width: clamp(17px, 4.8vw, 25px);
    height: clamp(17px, 4.8vw, 25px);
    flex: 0 0 auto;
    background: url('../Items/UI/star.png') center / contain no-repeat;
  }
  #score-modal .score-mobile-breakdown-detail {
    grid-area: detail;
    display: flex;
    flex-wrap: nowrap;
    gap: clamp(7px, 2.2vw, 14px);
    align-items: center;
    min-width: 0;
    color: rgba(242, 221, 255, .82);
    font-size: clamp(.68rem, 2.9vw, .94rem);
    font-weight: 800;
    line-height: 1.1;
  }
  #score-modal .score-mobile-trend-tag {
    white-space: nowrap;
  }
  #score-modal .score-mobile-trend-tag.is-matched { color: #9ff3bd; }
  #score-modal .score-mobile-trend-tag.is-missed { color: rgba(218, 211, 224, .82); }

  #score-modal .breakdown-icon {
    width: clamp(15px, 4vw, 22px) !important;
    height: clamp(15px, 4vw, 22px) !important;
  }

  #score-modal #score-items-label,
  #score-modal #score-trend-label {
    flex: 0 1 auto !important;
    width: auto !important;
    color: #e8c6fa !important;
    font-size: 0 !important;
    font-weight: 700;
    overflow: hidden !important;
    text-overflow: ellipsis;
  }

  #score-modal #score-items-label::before,
  #score-modal #score-trend-label::before {
    content: attr(data-mobile-label);
    font-size: clamp(.7rem, 3vw, 1rem);
    white-space: nowrap;
  }

  #score-modal #score-items-value,
  #score-modal #score-trend-value {
    min-width: 0 !important;
    color: inherit !important;
    font-size: clamp(.72rem, 3.15vw, 1.08rem) !important;
    line-height: 1;
  }

  #score-modal #score-items-mobile-detail { display: none !important; }
  #score-modal #score-row-trend {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'detail value';
  }
  #score-modal #score-row-trend .breakdown-icon,
  #score-modal #score-trend-label { display: none !important; }
  #score-modal #score-trend-mobile-detail { grid-area: detail; }

  #score-modal #score-reward-row {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: calc(100% + clamp(7px, 1.25dvh, 11px));
    height: clamp(28px, 4.8dvh, 42px);
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }
  #score-modal #score-total-label { display: none !important; }
  #score-modal #score-reward-row .total-value {
    color: #ffd76a !important;
    font-size: clamp(1.4rem, 6.2vw, 2.25rem) !important;
    line-height: 1;
    text-shadow: 0 3px 5px rgba(0, 0, 0, .65);
  }
  #score-modal #score-reward-row .total-value img {
    width: clamp(1.65rem, 7.1vw, 2.65rem) !important;
    height: clamp(1.65rem, 7.1vw, 2.65rem) !important;
  }

  #score-modal .instagram-actions-left-row {
    display: none !important;
  }
  #score-modal .instagram-actions-left-group {
    width: min(78%, 360px);
    justify-content: space-between;
    gap: clamp(10px, 3vw, 24px);
  }
  #score-modal .instagram-action-item { gap: clamp(5px, 1.8vw, 9px); }
  #score-modal .instagram-action-btn-new svg {
    width: clamp(19px, 5.5vw, 27px);
    height: clamp(19px, 5.5vw, 27px);
    stroke-width: 2.2;
  }
  #score-modal .instagram-action-count {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(.7rem, 3vw, 1rem);
    font-weight: 700;
  }

  #score-modal .instagram-comments-container-left {
    flex: 0 0 clamp(52px, 8.5dvh, 74px) !important;
    height: clamp(52px, 8.5dvh, 74px) !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
    background: #fff !important;
    overflow: hidden !important;
  }
  #score-modal .instagram-comments-container-left .score-comment-overlay {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: clamp(6px, 1.3dvh, 10px) clamp(10px, 3vw, 16px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #262626 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #score-modal .score-comment-arrow { display: none !important; }
  #score-modal .instagram-comments-container-left .score-comment-content {
    gap: 2px !important;
    padding: 0 !important;
  }
  #score-modal .instagram-comments-container-left .score-comment-main {
    align-items: center !important;
    gap: clamp(7px, 2vw, 11px) !important;
  }
  #score-modal .instagram-comments-container-left .score-comment-avatar {
    width: clamp(30px, 8vw, 42px) !important;
    height: clamp(30px, 8vw, 42px) !important;
    padding: 1.5px !important;
  }
  #score-modal .instagram-comments-container-left .score-comment-text-block {
    font-size: clamp(.65rem, 2.65vw, .9rem) !important;
    line-height: 1.16 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #score-modal .instagram-comments-container-left .score-comment-nick {
    display: inline !important;
    color: #262626 !important;
    font-size: inherit !important;
    line-height: inherit !important;
    margin: 0 4px 0 0 !important;
  }
  #score-modal .instagram-comments-container-left .score-comment-text {
    display: inline !important;
    color: #262626 !important;
  }
  #score-modal .instagram-comments-container-left .score-comment-actions-row {
    display: none !important;
  }

  #score-modal .score-right-col {
    position: relative;
    flex: 0 0 clamp(136px, 22dvh, 190px) !important;
    height: clamp(136px, 22dvh, 190px) !important;
    padding: clamp(8px, 1.5dvh, 13px) clamp(12px, 4vw, 22px) !important;
    display: flex !important;
    flex-direction: column;
    justify-content: stretch !important;
    gap: clamp(5px, .8dvh, 8px) !important;
    overflow: hidden !important;
    border: 1.5px solid rgba(255, 255, 255, .75);
    border-radius: clamp(15px, 4vw, 24px);
    background: #fff !important;
    box-shadow: 0 12px 30px rgba(10, 3, 20, .38), 0 0 20px rgba(193, 104, 232, .16);
  }

  #score-modal .social-results-block {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0 !important;
    margin: 0 !important;
  }
  #score-modal .score-result-mount-desktop { display: none !important; }

  #score-modal .score-rank-section {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  #score-modal .score-rank-header {
    height: clamp(24px, 4dvh, 36px);
    margin: 0 0 clamp(3px, .6dvh, 6px) !important;
  }
  #score-modal .score-mobile-followers-label {
    display: none !important;
  }
  #score-modal .score-rank-progress-container {
    height: clamp(22px, 3.7dvh, 32px);
    margin: 0 !important;
  }
  #score-modal .score-rank-progress-wrap {
    height: clamp(20px, 3.4dvh, 29px);
  }
  #score-modal .score-rank-progress-text {
    font-size: clamp(.66rem, 2.8vw, .9rem);
    font-weight: 800;
  }
  #score-modal .score-gift-wrap {
    position: relative;
    top: auto;
    right: auto;
    width: clamp(29px, 8vw, 43px);
    height: clamp(29px, 8vw, 43px);
    margin-left: -16px;
    flex-shrink: 0;
    overflow: visible;
  }
  #score-modal .score-gift-box {
    width: 100%;
    height: 100%;
    margin-left: 0;
  }
  #score-modal .score-milestone-subtext {
    position: static;
    flex: 0 0 auto;
    min-height: 20px;
    margin: 2px 0 0 !important;
    padding: 2px 6px !important;
  }

  #score-modal .score-actions-row {
    flex: 0 0 auto;
    gap: clamp(4px, .7dvh, 7px) !important;
  }
  #score-modal .score-actions-row .score-btn {
    min-height: 0 !important;
    height: clamp(34px, 5.2dvh, 45px) !important;
    padding: 0 clamp(12px, 4vw, 22px) !important;
    border-radius: 999px !important;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(.76rem, 3.4vw, 1.05rem) !important;
    font-weight: 800 !important;
  }
  #score-modal #btn-next-lesson {
    background: linear-gradient(100deg, #a53bd0, #8d31c1) !important;
    box-shadow: 0 6px 13px rgba(143, 49, 194, .28) !important;
  }
  #score-modal .score-actions-row-sub {
    margin: 0 !important;
    gap: 0 !important;
  }
  #score-modal #btn-double-reward {
    height: clamp(30px, 4.7dvh, 41px) !important;
    padding: 0 clamp(10px, 3vw, 18px) !important;
    border: 1.5px dashed rgba(168, 85, 247, .34) !important;
    border-radius: 999px !important;
    background: rgba(168, 85, 247, .035) !important;
    color: #a148c8 !important;
    font-size: clamp(.68rem, 3vw, .92rem) !important;
  }
  #score-modal #btn-share-score { display: none !important; }

  #score-modal.score-free-post .score-right-col {
    flex-basis: clamp(48px, 7dvh, 62px) !important;
    height: clamp(48px, 7dvh, 62px) !important;
    padding-block: clamp(6px, 1dvh, 9px) !important;
  }
  #score-modal.score-free-post .social-results-block,
  #score-modal.score-free-post .score-actions-row-sub { display: none !important; }
  #score-modal.score-free-post .score-actions-row { height: 100%; }
  #score-modal.score-free-post #btn-next-lesson { height: 100% !important; }
}

@media (max-width: 768px) and (orientation: portrait) and (min-height: 701px) {
  #score-modal .score-right-col {
    flex-basis: clamp(160px, 19dvh, 174px) !important;
    height: clamp(160px, 19dvh, 174px) !important;
    padding: 10px clamp(14px, 4vw, 18px) !important;
    gap: 6px !important;
  }

  #score-modal .social-results-block {
    flex: 1 1 auto;
    min-height: 55px;
  }

  #score-modal .score-rank-section {
    flex: 0 0 79px;
    height: 79px;
    display: grid;
    grid-template-rows: 26px 26px minmax(20px, auto);
    row-gap: 3px;
    align-content: start;
  }

  #score-modal .score-rank-header {
    height: 26px;
    margin: 0 !important;
  }

  #score-modal .score-rank-progress-container {
    width: 100%;
    height: 26px;
    min-height: 26px;
    padding: 0;
    box-sizing: border-box;
  }

  #score-modal .score-rank-progress-wrap {
    height: 24px;
    min-height: 24px;
  }

  #score-modal .score-actions-row {
    gap: 5px !important;
  }

  #score-modal #btn-next-lesson {
    height: 40px !important;
  }

  #score-modal #btn-double-reward {
    height: 34px !important;
  }
}

@media (max-width: 768px) and (orientation: portrait) and (max-height: 700px) {
  #score-modal .score-box { width: min(94vw, 520px) !important; max-width: min(94vw, 520px) !important; }
  #score-modal .score-right-col {
    flex-basis: 136px !important;
    height: 136px !important;
    padding: 7px 12px !important;
    gap: 4px !important;
  }
  #score-modal .score-result-details { bottom: 6px; gap: 2px; }
  #score-modal .score-status-title::before { font-size: clamp(1rem, 5vw, 1.35rem); }
  #score-modal #score-reward-row { height: 34px; }
  #score-modal #score-reward-row .total-value { font-size: clamp(1.65rem, 7vw, 2rem) !important; }
  #score-modal #score-row-items,
  #score-modal #score-row-trend {
    min-height: 0;
    height: 100%;
  }
  #score-modal .score-breakdown { height: 72px; }
  #score-modal .instagram-comments-container-left {
    flex-basis: 52px !important;
    height: 52px !important;
  }
  #score-modal .score-rank-header { height: 24px; margin-bottom: 2px !important; }
  #score-modal .score-rank-progress-container { height: 22px; }
  #score-modal .score-rank-progress-wrap { height: 20px; }
  #score-modal .score-actions-row .score-btn { height: 34px !important; }
  #score-modal #btn-double-reward { height: 30px !important; }
}