/*
 * Мобильный экран «Паутины судеб» по макету «Дорога приключений» v11.
 * Все правила ограничены .gmDestiny: соседние мини-приложения сохраняют свои стили.
 * Числа, доступность команд и текст карточек приходят с сервера, CSS их не вычисляет.
 */
.gmDestiny {
    --dw-bg: #0b0f0c;
    --dw-panel: #151b16;
    --dw-panel-soft: #1b211c;
    --dw-line: #343c34;
    --dw-text: #eee8db;
    --dw-muted: #a4aaa1;
    --dw-gold: #d2ad59;
    --dw-gold-light: #f0d78b;
    --dw-green: #a7c49a;
    --dw-red: #d48a81;
    --dw-serif: Georgia, 'Times New Roman', serif;
    --dw-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    position: relative;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    color: var(--dw-text);
    background: #080b09;
    font-family: var(--dw-sans), sans-serif;
    line-height: 1.4;
    isolation: isolate;
}
.gmDestiny *, .gmDestiny *::before, .gmDestiny *::after { box-sizing: border-box; }
.gmDestiny button { font: inherit; }
.gmDestiny button:focus-visible, .gmDestiny a:focus-visible {
    outline: 2px solid var(--dw-gold-light);
    outline-offset: 3px;
}
.gmDestiny button:disabled { cursor: default; }

/* Одна и та же «телефонная» композиция работает в VK Mini App и в широкой веб-оболочке. */
.gmDestinyApp {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(100%, 460px);
    height: 100%;
    min-height: 0;
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    background:
        radial-gradient(circle at 82% 25%, rgba(54, 77, 60, .15), transparent 30%),
        radial-gradient(circle at 14% 72%, rgba(108, 75, 67, .12), transparent 28%),
        linear-gradient(180deg, #111612, #0c110d 60%, #090c0a);
    box-shadow: 0 0 90px rgba(0, 0, 0, .5);
}
.gmDestinyApp::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .15;
    background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
    background-size: 32px 32px;
}
.gmDestinyApp > * { position: relative; }

/* Верхняя панель: герой и ресурсы остаются компактными, но подписи читаемы. */
.gmDestinyTopbar, .gmDestinyActbar {
    z-index: 3;
    flex: none;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: linear-gradient(180deg, rgba(18,23,19,.97), rgba(13,18,14,.93));
    backdrop-filter: blur(12px);
}
.gmDestinyTopbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: max(6px, env(safe-area-inset-top)) 11px 6px;
}
.gmDestinyBrand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.gmDestinyBrandMark {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    flex: none;
    border: 1px solid #786c4f;
    border-radius: 50%;
    color: var(--dw-gold-light);
    background: radial-gradient(circle at 45% 35%, #586646, #1b2a1e 74%);
    font-size: 17px;
}
.gmDestinyBrand > div { min-width: 0; }
.gmDestinyBrand small { display: block; color: var(--dw-muted); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.gmDestinyBrand strong { display: block; overflow: hidden; color: #f8efd8; font: 600 15px/1.2 var(--dw-serif); text-overflow: ellipsis; white-space: nowrap; }
.gmDestinyTopbarRow, .gmDestinyHeroRow, .gmDestinyActbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.gmDestinyTopbarTitle, .gmDestinyHeroName { min-width: 0; }
.gmDestinyTopbarTitle small, .gmDestinyActbar small, .gmDestinyTopbarLabel {
    display: block;
    color: var(--dw-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.gmDestinyTopbarTitle strong, .gmDestinyHeroName strong {
    display: block;
    overflow: hidden;
    color: #f8efd8;
    font: 600 17px/1.2 var(--dw-serif);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gmDestinyAvatar {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border: 1px solid #776a4c;
    border-radius: 50%;
    color: var(--dw-gold-light);
    background: radial-gradient(circle at 48% 25%, #796a46, #30402e 58%, #162018);
    font: 600 18px var(--dw-serif);
}
.gmDestinyTurn, .gmDestinyTopbarBadge {
    flex: none;
    padding: 7px 9px;
    border: 1px solid var(--dw-line);
    border-radius: 999px;
    color: var(--dw-muted);
    background: #111612;
    font-size: 11px;
}
.gmDestinyTurn strong, .gmDestinyTopbarBadge strong { color: var(--dw-gold-light); }
.gmDestinyResources {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-top: 9px;
}
.gmDestinyResource {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    min-height: 38px;
    padding: 4px;
    border: 1px solid var(--dw-line);
    border-radius: 9px;
    background: #111612;
}
.gmDestinyResource img { width: 18px; height: 18px; flex: none; object-fit: contain; }
.gmDestinyResource span { color: var(--dw-muted); font-size: 10px; }
.gmDestinyResource strong { color: var(--dw-gold-light); font: 700 15px var(--dw-serif); }
.gmDestinyResource.joy strong { color: #e5cd81; }
.gmDestinyResource.grief strong { color: #a6b6d1; }
.gmDestinyResource.insight strong { color: #e9a08e; }

.gmDestinyActbar { position: relative; display: block; min-height: 51px; padding: 6px 11px; }
.gmDestinyActbarHeading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gmDestinyActbarHeading > div { min-width: 0; }
.gmDestinyActbarProgress { align-self: flex-start; color: var(--dw-gold-light); font-size: 10px; text-align: right; }
.gmDestinyActbar h1, .gmDestinyActbar h2 {
    margin: 2px 0 0;
    color: #f5eddb;
    font: 600 18px/1.15 var(--dw-serif);
}
.gmDestinyActDots { display: flex; gap: 5px; flex: none; }
.gmDestinyActDot {
    width: 25px;
    height: 7px;
    border: 1px solid #3a4238;
    border-radius: 99px;
    background: #1a211a;
}
.gmDestinyActDot.active, .gmDestinyActDot.current {
    border-color: #92783d;
    background: linear-gradient(90deg, #806a37, #d0aa55);
    box-shadow: 0 0 14px rgba(209,173,89,.2);
}
.gmDestinyActSteps { position: absolute; right: 11px; bottom: 6px; display: flex; gap: 5px; }
.gmDestinyActSteps span { width: 27px; height: 6px; border: 1px solid #394139; border-radius: 99px; background: #192019; }
.gmDestinyActSteps span.current, .gmDestinyActSteps span.complete { border-color: #92783d; background: linear-gradient(90deg, #806a37, #d0aa55); }

/* Во время регистрации вместо номера акта показываются три серверных этапа. */
.gmDestinyStageButtons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 9px 11px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(12, 16, 13, .88);
}
.gmDestinyStageButton {
    min-width: 0;
    min-height: 44px;
    padding: 6px 4px;
    border: 1px solid var(--dw-line);
    border-radius: 9px;
    color: var(--dw-muted);
    background: #151b16;
    font-size: 11px;
    text-align: center;
    cursor: pointer;
}
.gmDestinyStageButton.current, .gmDestinyStageButton.active,
.gmDestinyPathStep.current {
    border-color: #aa8948;
    color: var(--dw-gold-light);
    background: rgba(101,78,32,.25);
}
.gmDestinyStageButton.complete, .gmDestinyPathStep.complete { color: #d7d3be; }
.gmDestinyStageButton:disabled, .gmDestinyPathStep:disabled { opacity: .7; }
.gmDestinyStageButton span, .gmDestinyStageButton small { display: block; }
.gmDestinyStageButton small { color: var(--dw-muted); font-size: 10px; }
.gmDestinyStageIcon { display: block; margin: 0 auto 3px; }
.gmDestinyStageIcon img { display: block; width: 17px; height: 17px; margin: 0 auto; }
.gmDestinyActbar .gmDestinyStageButtons { margin: 8px -3px -2px; padding: 0; border: 0; background: transparent; }

/* Параметры относятся к центральной карте. Пустой контекст не выдаёт выдуманных чисел. */
.gmDestinyContext {
    z-index: 2;
    flex: none;
    padding: 5px 11px 5px;
    background: linear-gradient(180deg, rgba(12,16,13,.95), rgba(12,16,13,.58) 78%, transparent);
}
.gmDestinyContextHeader {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 0 2px 6px;
    color: var(--dw-muted);
    font-size: 10px;
}
.gmDestinyContextHeader strong { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.gmDestinySectionHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 2px 4px; }
.gmDestinySectionHead small { color: var(--dw-muted); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.gmDestinyContextMore { padding: 2px 4px; border: 0; color: var(--dw-gold-light); background: transparent; font-size: 11px; cursor: pointer; }
.gmDestinyContextGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}
.gmDestinyContextGrid:has(> :only-child) { grid-template-columns: 1fr; }
.gmDestinyContextGrid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gmDestinyContextGrid:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gmDestinyContextCard, .gmDestinyContextItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 60px;
    padding: 4px 3px;
    border: 1px solid #3a433a;
    border-radius: 10px;
    background: rgba(20,26,21,.95);
    text-align: center;
}
.gmDestinyContextCard img, .gmDestinyContextItem img { width: 20px; height: 20px; flex: none; object-fit: contain; }
.gmDestinyContextCard strong, .gmDestinyContextItem strong { color: #f6edda; font: 700 16px/1 var(--dw-serif); }
.gmDestinyContextItem img { order: 0; }
.gmDestinyContextItem strong { order: 1; }
.gmDestinyContextItem span { order: 2; }
.gmDestinyContextCard span, .gmDestinyContextCard small,
.gmDestinyContextItem span, .gmDestinyContextItem small {
    display: -webkit-box;
    max-width: 100%;
    margin-top: 3px;
    overflow: hidden;
    color: var(--dw-muted);
    font-size: 10px;
    line-height: 1.15;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.gmDestinyContextCard.intelligence { border-color: #547182; }
.gmDestinyContextCard.endurance { border-color: #76554e; }
.gmDestinyContextCard.agility { border-color: #806e4d; }
.gmDestinyContextCard.perception { border-color: #5b7656; }
.gmDestinyContextCard.charisma { border-color: #775e7d; }
.gmDestinyContextCard.cost { border-color: #865e51; }
.gmDestinyContextCard.path { border-color: #756c54; }
.gmDestinyContextCard.good { border-color: #77765d; }
.gmDestinyContextCard.evil { border-color: #765c78; }

/* Центральная карта повторяет композицию v11. Боковые доступны как отдельные кнопки. */
.gmDestinyField {
    z-index: 1;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    padding: 5px 0 8px;
    overflow: hidden;
}
.gmDestinyFieldHeading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 8px;
    padding: 0 13px;
}
.gmDestinyFieldHeading small { color: var(--dw-muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.gmDestinyFieldHeading h2 { margin: 1px 0 6px; color: #f3e8d1; font: 600 17px/1.2 var(--dw-serif); }
.gmDestinyCounter {
    margin: 0 0 7px;
    color: var(--dw-muted);
    font-size: 11px;
    letter-spacing: .1em;
    text-align: center;
    text-transform: uppercase;
}
.gmDestinyFieldHeading .gmDestinyCounter { flex: none; margin-bottom: 6px; }
.gmDestinyCounter strong, .gmDestinyCounter b { color: #ede1c4; }
.gmDestinyCarousel, .gmDestinyCards {
    position: relative;
    width: 100%;
    height: clamp(285px, calc(100dvh - 430px), 398px);
    min-height: 285px;
    flex: none;
    overflow: hidden;
    perspective: 900px;
}
.gmDestinyCard {
    position: absolute;
    top: 6px;
    left: 50%;
    z-index: 1;
    display: block;
    width: min(63vw, 272px);
    height: calc(100% - 12px);
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #786e54;
    border-radius: 17px;
    color: #f4ecda;
    background: #172019;
    box-shadow: 0 24px 60px rgba(0,0,0,.52);
    text-align: left;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transform: translateX(-50%) scale(.83);
    transform-origin: 50% 88%;
    opacity: 0;
    pointer-events: none;
    transition: transform .28s ease, opacity .28s ease, filter .28s ease, border-color .2s ease;
}
.gmDestinyCard[data-pos='0'] {
    z-index: 3;
    border-color: #aa925e;
    box-shadow: 0 28px 76px rgba(0,0,0,.6), 0 0 0 1px rgba(240,215,139,.28);
    transform: translateX(-50%);
    opacity: 1;
    pointer-events: auto;
}
.gmDestinyCard[data-pos='-1'] {
    z-index: 2;
    transform: translateX(calc(-50% - min(50vw, 218px))) translateY(16px) rotate(-4deg) scale(.89);
    opacity: .62;
    filter: saturate(.72) brightness(.78);
    pointer-events: auto;
}
.gmDestinyCard[data-pos='1'] {
    z-index: 2;
    transform: translateX(calc(-50% + min(50vw, 218px))) translateY(16px) rotate(4deg) scale(.89);
    opacity: .62;
    filter: saturate(.72) brightness(.78);
    pointer-events: auto;
}
.gmDestinyCard[data-pos='-2'], .gmDestinyCard[data-pos='2'] {
    transform: translateX(-50%) scale(.82);
}
.gmDestinyCard.sel[data-pos='0'], .gmDestinyCard.ally-target[data-pos='0'] {
    border-color: var(--dw-gold-light);
    box-shadow: 0 28px 76px rgba(0,0,0,.6), 0 0 0 2px rgba(240,215,139,.5), 0 0 36px rgba(209,173,89,.16);
}
.gmDestinyCardImage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: radial-gradient(circle at 50% 30%, #455946, #202a22 55%, #111813);
}
.gmDestinyCardImage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gmDestinyCardFallback { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); opacity: .3; }
.gmDestinyCardFallback img { width: 74px; height: 74px; object-fit: contain; }
.gmDestinyCardImage::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6,8,7,.46), transparent 27%, rgba(7,9,8,.13) 53%, rgba(7,9,8,.77) 79%, rgba(7,9,8,.96));
    box-shadow: inset 0 0 46px rgba(0,0,0,.32);
    pointer-events: none;
}
.gmDestinyCardTitle {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 4;
    display: flex;
    align-items: center;
    min-height: 51px;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    color: #fff5dc;
    background: linear-gradient(180deg, rgba(8,11,9,.82), rgba(8,11,9,.52));
    box-shadow: 0 8px 22px rgba(0,0,0,.22);
    font: 700 18px/1.08 var(--dw-serif);
    text-shadow: 0 2px 10px rgba(0,0,0,.75);
    backdrop-filter: blur(8px);
}
.gmDestinyCardType, .gmDestinyCardStatus, .gmDestinyCardMeta {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 25px;
    padding: 4px 7px;
    border: 1px solid rgba(234,222,193,.4);
    border-radius: 8px;
    color: #f1e4c6;
    background: rgba(10,14,11,.76);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    backdrop-filter: blur(8px);
}
.gmDestinyCardType { top: 68px; left: 12px; }
.gmDestinyCardMeta { top: 68px; right: 12px; }
.gmDestinyCardStatus { right: 12px; bottom: 91px; }
.gmDestinyCardType img, .gmDestinyCardMeta img { width: 16px; height: 16px; object-fit: contain; }
.gmDestinyCardBody {
    position: absolute;
    right: 10px;
    bottom: 8px;
    left: 10px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 30%;
    overflow: hidden;
    color: #e7e3d7;
    font-size: 12px;
    line-height: 1.3;
    text-shadow: 0 2px 8px rgba(0,0,0,.9);
}
.gmDestinyCard:has(> .gmDestinyCardPaths) > .gmDestinyCardBody { bottom: 92px; }
.gmDestinyCardPaths {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 84px;
    border-top: 1px solid rgba(225,205,159,.38);
    color: #eee8da;
    background: rgba(10,14,11,.89);
    backdrop-filter: blur(10px);
}
.gmDestinyCardPaths > * { min-width: 0; padding: 8px 9px; }
.gmDestinyCardPaths:has(> :only-child) { grid-template-columns: 1fr; }
.gmDestinyCardPaths > * + * { border-left: 1px solid rgba(225,205,159,.22); }
.gmDestinyCardPaths small, .gmDestinyCardPaths em {
    display: block;
    color: #c3b597;
    font-size: 10px;
    font-style: normal;
    line-height: 1.18;
}
.gmDestinyCardPaths strong, .gmDestinyCardPaths b {
    display: block;
    margin: 3px 0;
    color: #fff1d2;
    font: 700 12px/1.2 var(--dw-serif);
}
.gmDestinyCardTrait { grid-column: 1 / -1; font-size: 11px; line-height: 1.35; }
.gmDestinyCardTrait strong { font-size: 13px; }
.gmDestinyCardPaths:has(> .gmDestinyCardTrait) { display: flex; align-items: stretch; }
.gmDestinyCardPaths > .gmDestinyCardTrait { flex: 1 1 0; padding: 8px 5px; font-size: 10px; }
.gmDestinyCard:not(:has(> .gmDestinyCardPaths)) > .gmDestinyCardBody {
    right: 0;
    bottom: 0;
    left: 0;
    max-height: 40%;
    padding: 28px 14px 14px;
    background: linear-gradient(180deg, transparent, rgba(8,12,9,.92) 65%);
}
.gmDestinyCard .gmDestinyAlly, .gmDestinyCardAlly { color: var(--dw-gold-light); font-size: 11px; }
.gmDestinyCard .gmDestinyCardAction { color: var(--dw-gold-light); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.gmDestinyCard[data-pos='-1'] > *, .gmDestinyCard[data-pos='1'] > * { pointer-events: none; }
.gmDestinyCarouselControls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 34px;
    padding: 3px 10px;
    color: var(--dw-muted);
    font-size: 11px;
}
.gmDestinyCarouselControls button {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--dw-line);
    border-radius: 8px;
    color: #e2d1a4;
    background: #172019;
    cursor: pointer;
}
.gmDestinyCarouselControls button:disabled { opacity: .42; }
.gmDestinyDots { display: flex; align-items: center; gap: 5px; }
.gmDestinyDots span { width: 6px; height: 6px; border: 1px solid #6b705d; border-radius: 50%; background: #313a31; }
.gmDestinyDots span.active { border-color: var(--dw-gold-light); background: var(--dw-gold); }
.gmDestinyEmpty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: min(80%, 290px);
    height: calc(100% - 16px);
    margin: 8px auto;
    padding: 24px;
    border: 1px dashed #716342;
    border-radius: 16px;
    color: var(--dw-muted);
    background: #172019;
    text-align: center;
}
.gmDestinyEmpty strong { color: #f1e5c9; font: 600 18px var(--dw-serif); }
.gmDestinyEmpty small { margin-top: 5px; font-size: 12px; }
.gmDestinyField > .gmDestinyEmpty { min-height: 260px; height: auto; }

/* Союзник ожидает допустимую цель. Подсветка не подменяет серверную проверку слота. */
.gmDestinyPendingAlly, .gmDestinyNotice {
    margin: 7px 12px;
    padding: 9px 11px;
    border: 1px solid #756144;
    border-radius: 10px;
    color: #eadab4;
    background: rgba(65,48,25,.54);
    font-size: 12px;
    line-height: 1.4;
}
.gmDestinyNotice.error { border-color: #89534e; color: #f1c4be; background: rgba(69,30,27,.62); }
.gmDestinyPendingAlly strong, .gmDestinyNotice strong { display: block; margin-bottom: 2px; }
.gmDestinyPendingAlly span, .gmDestinyNotice span { display: block; }

/* Нижняя панель липнет к видимой области и не закрывает safe area телефона. */
.gmDestinyBottom {
    position: sticky;
    bottom: 0;
    z-index: 6;
    flex: none;
    padding: 6px 10px calc(7px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255,255,255,.09);
    background: linear-gradient(180deg, rgba(19,24,20,.94), rgba(10,14,11,.99));
    backdrop-filter: blur(14px);
}
.gmDestinySelection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 37px;
    margin-bottom: 7px;
}
.gmDestinyChoice { display: flex; flex-direction: column; justify-content: center; min-height: 31px; margin-bottom: 5px; }
.gmDestinyChoice small { color: var(--dw-muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.gmDestinySelection small { display: block; color: var(--dw-muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.gmDestinySelectionLabel { display: block; color: #f1e9d5; font: 600 14px/1.2 var(--dw-serif); }
.gmDestinySelectionMeta { color: var(--dw-gold-light); font-size: 11px; text-align: right; }
.gmDestinyPrimaryAction {
    width: 100%;
    min-height: 45px;
    padding: 9px 12px;
    border: 1px solid #9a7c3c;
    border-radius: 11px;
    color: #ffebb0;
    background: linear-gradient(180deg, #5e4a28, #372919);
    box-shadow: 0 10px 25px rgba(0,0,0,.27);
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .07em;
    text-transform: uppercase;
    cursor: pointer;
}
.gmDestinyPrimaryAction:disabled {
    border-color: #3b433a;
    color: #92998d;
    background: #202720;
    box-shadow: none;
}
.gmDestinyPrimaryAction:not(:disabled):active { transform: translateY(1px); }
.gmDestinyQuickNav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    margin-top: 6px;
}
.gmDestinyQuickNav button, .gmDestinyNavButton {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 38px;
    padding: 3px;
    border: 1px solid #363f35;
    border-radius: 9px;
    color: #b3b9ae;
    background: #141a15;
    font-size: 10px;
    cursor: pointer;
}
.gmDestinyQuickNav button.active, .gmDestinyNavButton.active {
    border-color: #79673d;
    color: #ead49a;
    background: rgba(114,88,36,.2);
}
.gmDestinyQuickNav img { width: 19px; height: 19px; object-fit: contain; }
.gmDestinyQuickNav button > span[aria-hidden='true'] { color: var(--dw-gold-light); font-size: 18px; line-height: 1; }
.gmDestinyEndNote { margin: 0 0 8px; color: var(--dw-muted); font-size: 12px; line-height: 1.4; }
.gmDestiny.request-in-progress .gmDestinyCard,
.gmDestiny.request-in-progress .gmDestinyStageButton,
.gmDestiny.request-in-progress .gmDestinyPrimaryAction { pointer-events: none; }
.gmDestiny.request-in-progress .gmDestinyBottom { opacity: .72; }

/* Лист описания и истории использует тот же слой для всех вкладок и сохраняет фокус. */
.gmDestinySheet {
    position: fixed;
    inset: 0;
    z-index: 40;
    visibility: hidden;
    pointer-events: none;
    transition: visibility .28s;
}
.gmDestinySheet.open { visibility: visible; pointer-events: auto; }
.gmDestinySheetBackdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(4,7,5,.68);
    opacity: 0;
    backdrop-filter: blur(4px);
    transition: opacity .25s;
}
.gmDestinySheet.open .gmDestinySheetBackdrop { opacity: 1; }
.gmDestinySheetPanel {
    position: absolute;
    bottom: 0;
    left: 50%;
    display: flex;
    flex-direction: column;
    width: min(100%, 460px);
    max-height: min(80dvh, 720px);
    overflow: hidden;
    border: 1px solid #55584b;
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    color: var(--dw-text);
    background: linear-gradient(180deg, #1c231d, #101611);
    box-shadow: 0 -28px 70px rgba(0,0,0,.58);
    transform: translate(-50%, 103%);
    transition: transform .28s ease;
}
.gmDestinySheet.open .gmDestinySheetPanel { transform: translate(-50%, 0); }
.gmDestinySheetHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
    padding: 11px 14px 8px;
    border-bottom: 1px solid #343d34;
}
.gmDestinySheetTitle { margin: 0; color: #f1e8d5; font: 600 18px/1.2 var(--dw-serif); }
.gmDestinySheetHeader small { color: var(--dw-muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.gmDestinySheetClose {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border: 1px solid #444d43;
    border-radius: 8px;
    color: #d4d9cd;
    background: #161d17;
    font-size: 20px;
    cursor: pointer;
}
.gmDestinySheetContent {
    min-height: 0;
    padding: 15px 14px calc(20px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior-y: contain;
    color: #c4c9bd;
    font-size: 13px;
    line-height: 1.5;
}
.gmDestinySheetContent h3, .gmDestinySheetContent h4 {
    margin: 0 0 8px;
    color: #f0e3c7;
    font: 600 18px/1.2 var(--dw-serif);
}
.gmDestinySheetContent p { margin: 0 0 11px; }
.gmDestinySheetContent img { max-width: 100%; }
.gmDestinySheetContent .gmDestinySheetCardImage {
    width: 100%;
    height: 180px;
    border: 1px solid #465044;
    border-radius: 11px;
    object-fit: cover;
}
.gmDestinySheetList { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gmDestinySheetList > li, .gmDestinySheetList > div, .gmDestinySheetItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    border: 1px solid #3a4439;
    border-radius: 10px;
    background: #171e18;
}
.gmDestinySheetList strong, .gmDestinySheetItem strong { color: #eaddbb; }
.gmDestinySheetList > div > span { min-width: 0; }
.gmDestinySheetList > div > strong { flex: none; text-align: right; }
.gmDestinySheetSection[hidden] { display: none; }
.gmDestinyDetailImage { margin-bottom: 11px; }
.gmDestinyDetailImage img { display: block; width: 100%; max-height: 220px; border: 1px solid #465044; border-radius: 10px; object-fit: cover; }
.gmDestinyDetailType { color: var(--dw-gold-light); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.gmDestinyDetailGameTitle { color: #e4d0a5; font: 600 15px/1.25 var(--dw-serif); }
.gmDestinyDetailFace { display: grid; gap: 7px; }
.gmDestinyDetailFace > * { padding: 9px; border: 1px solid #3e473c; border-radius: 9px; background: #171e18; }
.gmDestinyDetailRow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gmDestinyDetailRow strong { color: #f1e1b5; text-align: right; }
.gmDestinyDetailNotice { margin-top: 12px !important; color: var(--dw-muted); font-size: 12px; }
.gmDestinySheetGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gmDestinySheetGrid > * {
    min-width: 0;
    padding: 10px;
    border: 1px solid #3e473c;
    border-radius: 10px;
    background: #161d17;
}

/* Узкие и низкие экраны получают меньшую карту; прокрутка остаётся доступной. */
@media (max-width: 360px) {
    .gmDestinyTopbar, .gmDestinyActbar { padding-left: 10px; padding-right: 10px; }
    .gmDestinyCard { width: min(66vw, 245px); }
    .gmDestinyCardTitle { font-size: 16px; }
    .gmDestinyContextGrid { gap: 4px; }
    .gmDestinyContextCard, .gmDestinyContextItem { min-height: 62px; }
}
@media (max-height: 700px) {
    .gmDestinyTopbar { padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: 4px; }
    .gmDestinyBrandMark { width: 27px; height: 27px; }
    .gmDestinyActbar { min-height: 47px; padding-top: 4px; padding-bottom: 4px; }
    .gmDestinyActbar h1, .gmDestinyActbar h2 { font-size: 16px; }
    .gmDestinyActSteps { bottom: 4px; }
    .gmDestinyContext { padding: 2px 9px 3px; }
    .gmDestinySectionHead { margin-bottom: 2px; }
    .gmDestinyContextCard, .gmDestinyContextItem { min-height: 54px; padding: 2px; }
    .gmDestinyContextCard img, .gmDestinyContextItem img { width: 17px; height: 17px; }
    .gmDestinyContextCard strong, .gmDestinyContextItem strong { font-size: 14px; }
    .gmDestinyContextCard span, .gmDestinyContextItem span { margin-top: 2px; font-size: 9px; }
    .gmDestinyField { padding: 0 0 2px; }
    .gmDestinyFieldHeading small { display: none; }
    .gmDestinyFieldHeading h2 { margin-bottom: 2px; font-size: 15px; }
    .gmDestinyFieldHeading .gmDestinyCounter { margin-bottom: 2px; }
    .gmDestinyCarousel, .gmDestinyCards { height: 257px; min-height: 257px; }
    .gmDestinyCardTitle { min-height: 41px; font-size: 15px; }
    .gmDestinyCardType, .gmDestinyCardMeta { top: 58px; }
    .gmDestinyCardPaths { min-height: 70px; }
    .gmDestinyCard:has(> .gmDestinyCardPaths) > .gmDestinyCardBody { bottom: 78px; }
    .gmDestinyCarouselControls {
        position: absolute;
        top: 52%;
        right: 3px;
        left: 3px;
        z-index: 5;
        justify-content: space-between;
        padding: 0;
        pointer-events: none;
        transform: translateY(-50%);
    }
    .gmDestinyCarouselControls button { pointer-events: auto; }
    .gmDestinyDots { display: none; }
    .gmDestinyBottom { padding: 4px 8px calc(5px + env(safe-area-inset-bottom)); }
    .gmDestinyChoice { min-height: 27px; margin-bottom: 3px; }
    .gmDestinyPrimaryAction { min-height: 42px; }
    .gmDestinyQuickNav { margin-top: 4px; }
    .gmDestinyQuickNav button, .gmDestinyNavButton { min-height: 32px; padding: 2px; font-size: 9px; }
    .gmDestinyQuickNav button > span[aria-hidden='true'] { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .gmDestinyCard, .gmDestinySheet, .gmDestinySheetBackdrop,
    .gmDestinySheetPanel, .gmDestinyPrimaryAction { transition: none; }
}