/* ============================================================================
   Магазин: ранги, изумруды, окно выбора оплаты.

   Раньше эти правила были разбросаны по styles.css в трёх местах, с двумя
   повторами .player-preview, .benefit-item и .total-amount. Классы ниже нигде,
   кроме магазина, не используются.

   Вёрстка ранга: сверху три плитки с ценами (ранги сравнивают между собой —
   цены должны быть видны сразу, а не по одной в выпадающем списке), под ними
   сцена «как это будет в игре» и список привилегий, внизу итог и кнопка.

   Цвет выбранного ранга — его цвет в самой игре: VIP §a, MVP §b, CUSTOM §d.
   shop.js ставит data-rank на карточку; от него красятся подсветка сцены,
   маркеры привилегий и рамка выбранной плитки. Тень у надписей — как в игре:
   тот же цвет на четверть яркости, сдвинутый на пиксель шрифта.
   ========================================================================= */

[data-rank="vip"] {
    --rank: var(--mc-a);
    --rank-shadow: #153f15;
}

[data-rank="mvp"] {
    --rank: var(--mc-b);
    --rank-shadow: #153f3f;
}

[data-rank="custom"] {
    --rank: var(--mc-d);
    --rank-shadow: #3f153f;
}

.shop-container {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

.shop-card {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--sp-5);
}

/* --- Статус своего ранга --------------------------------------------------
   Шесть состояний. Три платных ранга — лестница vip/mvp/custom, как места
   1/2/3 в дуэльном рейтинге (--bronze/--silver/--gold); три статусных —
   смысловые цвета сайта: «нельзя купить» (--danger-color), «уже есть»
   (--success-color), «доступна скидка» (--primary-color). */

.current-rank-badge {
    margin-bottom: var(--sp-4);
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--panel-2);
    color: var(--text-secondary);
    font-size: var(--fs-cell);
}

.current-rank-badge strong {
    font-weight: 700;
}

.rank-badge-vip {
    border-color: rgba(208, 140, 96, 0.4);
    background: rgba(208, 140, 96, 0.1);
    color: var(--bronze);
}

.rank-badge-mvp {
    border-color: rgba(203, 213, 225, 0.35);
    background: rgba(203, 213, 225, 0.08);
    color: var(--silver);
}

.rank-badge-custom {
    border-color: rgba(255, 209, 102, 0.4);
    background: rgba(255, 209, 102, 0.1);
    color: var(--gold);
}

.rank-badge-staff {
    border-color: rgba(255, 51, 85, 0.35);
    background: rgba(255, 51, 85, 0.08);
    color: var(--danger-color);
}

.rank-badge-upgrade {
    border-color: rgba(255, 0, 60, 0.35);
    background: rgba(255, 0, 60, 0.08);
    color: var(--primary-color);
}

.rank-badge-owned {
    border-color: rgba(39, 174, 96, 0.35);
    background: rgba(39, 174, 96, 0.1);
    color: var(--success-color);
}

/* --- Плитки рангов ------------------------------------------------------ */

.rank-tiers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-3);
}

.rank-tier {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-4);
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.rank-tier:hover {
    background: var(--panel-3);
}

.rank-tier[aria-checked="true"] {
    border-color: var(--rank);
    box-shadow: inset 0 0 0 1px var(--rank);
    background: var(--panel-3);
}

/* 24px — ровно три экранных пикселя на пиксель глифа. */
.rank-tier-tag {
    font-family: 'Minecraft', monospace;
    font-size: 24px;
    line-height: 1;
    color: var(--rank);
    text-shadow: 3px 3px 0 var(--rank-shadow);
    white-space: nowrap;
}

/* CUSTOM — строка, которую игрок наберёт сам, поэтому все цвета сразу. Тень
   через filter: у текста с прозрачной заливкой text-shadow просвечивает. */
.rank-tier[data-rank="custom"] .rank-tier-tag {
    background: linear-gradient(90deg, var(--mc-c), var(--mc-6), var(--mc-e), var(--mc-a), var(--mc-b), var(--mc-9), var(--mc-d));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(3px 3px 0 #2a2a2a);
}

.rank-tier-price {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    font-variant-numeric: tabular-nums;
}

.rank-tier-price b {
    font-size: var(--fs-section);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.rank-tier-old {
    font-size: var(--fs-cell);
    color: var(--text-mute);
}

.rank-tier-old:empty {
    display: none;
}

.rank-tier-owned {
    display: none;
    font-size: var(--fs-note);
    color: var(--success-color);
}

.rank-tier.owned .rank-tier-owned {
    display: block;
}

.rank-tier.owned .rank-tier-price {
    color: var(--text-mute);
}

/* --- Сцена и привилегии -------------------------------------------------- */

.rank-body {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--sp-5);
    margin-top: var(--sp-5);
}

/* Модель стоит на «полу», подсвеченном цветом ранга снизу. Сцена своей высоты
   и держится на экране, пока правая колонка (CUSTOM, подарок) длиннее её. */
.shop-stage {
    position: sticky;
    top: 80px;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
    min-height: 400px;
    padding: var(--sp-5) var(--sp-4) var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--panel);
    background:
        radial-gradient(70% 40% at 50% 100%, color-mix(in srgb, var(--rank) 20%, transparent), transparent 75%),
        var(--panel);
    overflow: hidden;
}

/* Табличка с ником над головой, как в игре: полупрозрачная чёрная подложка.
   Ширину строки подгоняет scaleFontToFit (js/utils/mc-text.js) по ширине
   этого контейнера, поэтому он во всю ширину сцены. */
.player-name-display {
    display: flex;
    justify-content: center;
    width: 100%;
}

#full-rank-display.mc-text-wrapper {
    display: inline-block;
    max-width: 100%;
    padding: 4px 8px 2px;
    background: rgba(0, 0, 0, 0.45);
    font-family: 'Minecraft', sans-serif;
    font-size: 32px;
    line-height: 1;
    white-space: nowrap;
    color: #fff;
    text-shadow: 2px 2px 0 #3f3f3f;
    -webkit-font-smoothing: none;
}

/* Размер холста читает shop.js из этих же правил при создании просмотрщика. */
.player-viewer {
    width: 200px;
    height: 300px;
    flex-shrink: 0;
}

.player-viewer canvas {
    display: block;
    width: 200px !important;
    height: 300px !important;
}

.rank-details {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    min-width: 0;
}

.rank-benefits {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Маркер — пиксель цвета ранга со своей игровой тенью. */
.benefit-item {
    position: relative;
    padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
    border-bottom: 1px solid var(--line);
    color: var(--text-primary);
    font-size: var(--fs-body);
    line-height: 1.45;
}

.benefit-item:last-child {
    border-bottom: 0;
}

.benefit-item::before {
    content: '';
    position: absolute;
    left: 2px;
    top: calc(var(--sp-2) + 0.5em);
    width: 6px;
    height: 6px;
    background: var(--rank);
    box-shadow: 2px 2px 0 var(--rank-shadow);
}

/* --- Строка CUSTOM ------------------------------------------------------- */

.custom-rank-input-wrapper {
    padding: var(--sp-4);
    background: var(--panel-2);
    border-radius: var(--radius-control);
}

.custom-rank-input-wrapper label {
    display: block;
    margin-bottom: var(--sp-2);
    font-size: var(--fs-cell);
    color: var(--text-secondary);
}

/* Строку набирают теми же кодами, что в игре, — и шрифтом игры. */
.custom-rank-input-wrapper input {
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    color: var(--text-primary);
    font-family: 'Minecraft', monospace;
    font-size: 16px;
    outline: none;
    transition: border-color 0.15s ease;
}

.custom-rank-input-wrapper input:focus {
    border-color: var(--rank);
}

.formatting-help {
    margin-top: var(--sp-3);
}

.formatting-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--fs-cell);
    transition: color 0.15s ease, border-color 0.15s ease;
}

.formatting-toggle:hover {
    color: var(--text-primary);
    border-color: var(--text-mute);
}

.formatting-toggle-arrow {
    transition: transform 0.2s ease;
}

.formatting-toggle.open .formatting-toggle-arrow {
    transform: rotate(180deg);
}

.formatting-codes {
    display: none;
    flex-direction: column;
    gap: var(--sp-3);
    margin-top: var(--sp-2);
    padding: var(--sp-3);
    background: var(--panel);
    border-radius: var(--radius-control);
}

.formatting-codes.open {
    display: flex;
}

.formatting-section {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.formatting-section strong {
    font-size: var(--fs-note);
    font-weight: 600;
    color: var(--text-secondary);
}

.formatting-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--sp-1) var(--sp-3);
}

.fmt-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
}

.format-code {
    flex-shrink: 0;
    padding: 1px 4px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 3px;
    font-family: 'Minecraft', monospace;
    font-size: var(--fs-note);
}

/* Цвет у кода цвета — его же класс .mc-* из styles.css; остальным — свой. */
.format-code:not([class*="mc-"]) {
    color: var(--text-primary);
}

.fmt-name {
    overflow: hidden;
    color: var(--text-mute);
    font-size: var(--fs-note);
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* --- Кому выдать ранг ----------------------------------------------------- */

.gift-toggle-wrapper {
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
}

.buy-mode {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: 0;
    padding: 0;
    border: 0;
}

.buy-mode legend {
    margin-bottom: var(--sp-2);
    padding: 0;
    font-size: var(--fs-cell);
    color: var(--text-secondary);
}

.buy-mode label {
    position: relative;
}

/* Радиокнопка остаётся в разметке и ловит клик и фокус, видна — подпись. */
.buy-mode input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.buy-mode span {
    display: block;
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: var(--fs-cell);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.buy-mode label:hover span {
    color: var(--text-primary);
}

.buy-mode input:checked + span {
    background: var(--panel-3);
    border-color: var(--text-mute);
    color: var(--text-primary);
}

.buy-mode input:focus-visible + span {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.gift-fields {
    margin-top: var(--sp-4);
}

.gift-hint {
    margin-bottom: var(--sp-3);
    font-size: var(--fs-note);
    line-height: 1.45;
    color: var(--text-secondary);
}

/* --- Поля: ник, email, сумма ---------------------------------------------- */

.shop-field {
    margin-bottom: var(--sp-3);
}

.shop-field label {
    display: block;
    margin-bottom: var(--sp-1);
    font-size: var(--fs-cell);
    color: var(--text-secondary);
}

.shop-field input[type="text"],
.shop-field input[type="email"],
.shop-field input[type="number"] {
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    color: var(--text-primary);
    /* Ровно 16px: Safari на iOS увеличивает страницу, когда фокус попадает
       в поле с меньшим кеглем. */
    font-size: 16px;
    outline: none;
    transition: border-color 0.15s ease;
}

.shop-field input:focus {
    border-color: var(--text-mute);
}

.nick-status {
    min-height: 1.1rem;
    margin-top: var(--sp-1);
    font-size: var(--fs-note);
    line-height: 1.2;
}

.nick-status-checking {
    color: var(--text-secondary);
}

.nick-status-error {
    color: var(--mc-c);
}

.nick-status-ok {
    color: var(--success-hover);
}

/* --- Итог и кнопка ------------------------------------------------------- */

.shop-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--sp-5);
    margin-top: var(--sp-5);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--line);
}

.discount-hint {
    max-width: 52ch;
    margin: 0;
    font-size: var(--fs-note);
    line-height: 1.5;
    color: var(--text-mute);
}

.shop-total {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
}

.total-label {
    font-size: var(--fs-cell);
    color: var(--text-secondary);
}

/* Сумма белая: акцент на экране один — кнопка рядом. */
.total-amount {
    font-size: var(--fs-page);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.btn-buy {
    padding: 14px 28px;
    border: 0;
    border-radius: 999px;
    background: var(--primary-color);
    color: #fff;
    font: inherit;
    font-size: var(--fs-body);
    font-weight: 700;
    transition: background 0.15s ease;
}

.btn-buy:hover {
    background: var(--hover-color);
}

.btn-buy:active {
    transform: translateY(1px);
}

.btn-buy.btn-disabled,
.btn-buy:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* --- Изумруды -------------------------------------------------------------
   Своя карточка, свой цвет — изумруд из игры. Зелёный только у самоцвета,
   итоговой суммы и кнопки: остальное в общей палитре. */

.emerald-card {
    --emerald: #17dd62;
}

.emerald-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-4);
}

.emerald-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
    font-size: var(--fs-section);
    color: var(--text-primary);
}

/* Нарисованный самоцвет вместо 💎 — эмодзи на каждой платформе свой. */
.emerald-gem {
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
    fill: none;
    stroke: var(--emerald);
    stroke-width: 1.15;
    stroke-linejoin: round;
}

.emerald-rate {
    font-size: var(--fs-cell);
    color: var(--text-secondary);
}

.emerald-subtitle {
    max-width: 60ch;
    margin: var(--sp-1) 0 var(--sp-5);
    font-size: var(--fs-cell);
    line-height: 1.5;
    color: var(--text-secondary);
}

.emerald-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--sp-5);
}

.emerald-presets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}

.emerald-preset {
    padding: 4px 12px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--fs-cell);
    font-variant-numeric: tabular-nums;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.emerald-preset:hover {
    color: var(--text-primary);
    border-color: var(--emerald);
}

.emerald-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-4);
    margin-top: var(--sp-2);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--line);
}

.emerald-result {
    font-size: var(--fs-body);
    color: var(--text-secondary);
}

.emerald-result strong {
    margin: 0 var(--sp-1);
    font-size: var(--fs-section);
    color: var(--emerald);
    font-variant-numeric: tabular-nums;
}

#emerald-buy-button {
    background: var(--emerald);
    color: #04210f;
}

#emerald-buy-button:hover {
    background: #4ae887;
}

/* --- Окно выбора оплаты ---------------------------------------------------- */

.payment-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
}

/* Tebex (скоро) — тот же .btn, что YooKassa рядом, только приглушённый. */
.btn-tebex {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.tebex-soon-badge {
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(224, 164, 74, 0.18);
    color: var(--warning-color);
    font-size: var(--fs-label);
    font-weight: 700;
}

/* --- Ширины ------------------------------------------------------------------ */

@media (min-width: 768px) {
    .emerald-body {
        grid-template-columns: 1fr 1fr;
    }

    #emerald-email-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .rank-body {
        grid-template-columns: 1fr;
    }

    /* В одну колонку sticky держался бы за всю сетку и наезжал на список. */
    .shop-stage {
        position: static;
        min-height: 0;
    }

    .shop-footer {
        grid-template-columns: 1fr auto;
    }

    .discount-hint {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .shop-card {
        padding: var(--sp-4);
    }

    /* В треть телефона [CUSTOM] пиксельным шрифтом не помещается — плитки
       встают строками: ранг слева, цена справа. */
    .rank-tiers {
        grid-template-columns: 1fr;
        gap: var(--sp-2);
    }

    .rank-tier {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding: var(--sp-3) var(--sp-4);
    }

    .rank-tier-owned {
        flex-basis: 100%;
    }

    /* 16px — два экранных пикселя на пиксель глифа. */
    .rank-tier-tag {
        font-size: 16px;
        text-shadow: 2px 2px 0 var(--rank-shadow);
    }

    .rank-tier[data-rank="custom"] .rank-tier-tag {
        filter: drop-shadow(2px 2px 0 #2a2a2a);
    }

    .rank-tier-price b {
        font-size: var(--fs-card);
    }

    .player-viewer {
        width: 150px;
        height: 225px;
    }

    .player-viewer canvas {
        width: 150px !important;
        height: 225px !important;
    }

    .shop-footer {
        grid-template-columns: 1fr;
        gap: var(--sp-4);
    }

    .btn-buy {
        width: 100%;
    }
}