:root {
    --bg:
        var(
            --tg-theme-bg-color,
            #0d0f12
        );

    --surface:
        var(
            --tg-theme-secondary-bg-color,
            #171a1f
        );

    --surface-2:
        #20242b;

    --text:
        var(
            --tg-theme-text-color,
            #f5f7fa
        );

    --muted:
        var(
            --tg-theme-hint-color,
            #9298a3
        );

    --accent:
        #f0642c;

    --accent-2:
        #ff8b3d;

    --border:
        rgba(
            255,
            255,
            255,
            0.08
        );

    --radius:
        22px;

    --nav-height:
        78px;
}


* {
    box-sizing:
        border-box;
}


html,
body {
    margin:
        0;

    min-height:
        100%;

    background:
        var(--bg);

    color:
        var(--text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


body {
    min-height:
        100vh;
}


button,
a {
    -webkit-tap-highlight-color:
        transparent;
}


#app {
    width:
        100%;

    max-width:
        620px;

    min-height:
        100vh;

    margin:
        0 auto;

    position:
        relative;

    padding-bottom:
        calc(
            var(--nav-height)
            + 30px
        );
}


.topbar {
    position:
        sticky;

    top:
        0;

    z-index:
        20;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    padding:
        14px 18px;

    background:
        rgba(
            13,
            15,
            18,
            0.88
        );

    backdrop-filter:
        blur(18px);

    border-bottom:
        1px solid
        var(--border);
}


.brand {
    display:
        flex;

    align-items:
        center;

    gap:
        11px;
}


.brand-mark {
    display:
        grid;

    place-items:
        center;

    width:
        42px;

    height:
        42px;

    flex:
        0 0 42px;

    border-radius:
        14px;

    background:
        linear-gradient(
            145deg,
            var(--accent-2),
            var(--accent)
        );

    color:
        white;

    font-weight:
        900;

    font-size:
        14px;

    letter-spacing:
        -0.5px;

    box-shadow:
        0 8px 25px
        rgba(
            240,
            100,
            44,
            0.28
        );
}


.brand-title {
    font-weight:
        850;

    font-size:
        13px;

    letter-spacing:
        0.4px;
}


.brand-subtitle {
    margin-top:
        2px;

    color:
        var(--muted);

    font-size:
        11px;
}


.telegram-user {
    max-width:
        120px;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        var(--muted);

    font-size:
        12px;
}


.content {
    padding:
        0 16px 24px;
}


.hero {
    position:
        relative;

    overflow:
        hidden;

    margin:
        16px 0 28px;

    padding:
        26px 22px;

    min-height:
        180px;

    border:
        1px solid
        var(--border);

    border-radius:
        28px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(
                240,
                100,
                44,
                0.32
            ),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #202329,
            #121419
        );
}


.hero::after {
    content:
        "🎲";

    position:
        absolute;

    right:
        -12px;

    bottom:
        -35px;

    font-size:
        150px;

    opacity:
        0.07;

    transform:
        rotate(-12deg);
}


.eyebrow {
    margin-bottom:
        9px;

    color:
        var(--accent-2);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        1.5px;
}


.hero h1 {
    margin:
        0;

    max-width:
        330px;

    font-size:
        34px;

    line-height:
        1.05;

    letter-spacing:
        -1.2px;
}


.hero p {
    max-width:
        340px;

    margin:
        14px 0 0;

    color:
        #b8bdc6;

    line-height:
        1.5;

    font-size:
        14px;
}


.section-header {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    margin-bottom:
        14px;
}


.section-header h2 {
    margin:
        0;

    font-size:
        20px;

    letter-spacing:
        -0.4px;
}


.section-header p {
    margin:
        5px 0 0;

    color:
        var(--muted);

    font-size:
        12px;
}


.partidas {
    display:
        grid;

    gap:
        16px;
}


.card {
    overflow:
        hidden;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius);

    background:
        var(--surface);

    box-shadow:
        0 12px 40px
        rgba(
            0,
            0,
            0,
            0.15
        );
}


.card-image-wrap {
    position:
        relative;

    aspect-ratio:
        16 / 8.5;

    overflow:
        hidden;

    background:
        var(--surface-2);
}


.card-image {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.card-image-overlay {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            transparent 50%,
            rgba(
                0,
                0,
                0,
                0.72
            )
        );
}


.card-date {
    position:
        absolute;

    top:
        12px;

    left:
        12px;

    padding:
        8px 11px;

    border-radius:
        12px;

    background:
        rgba(
            8,
            9,
            11,
            0.82
        );

    backdrop-filter:
        blur(8px);

    color:
        white;

    font-size:
        12px;

    font-weight:
        750;
}


.card-body {
    padding:
        17px;
}


.card-title {
    margin:
        0;

    font-size:
        21px;

    line-height:
        1.15;

    letter-spacing:
        -0.4px;
}


.card-meta {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        13px;
}


.meta-pill {
    padding:
        7px 10px;

    border:
        1px solid
        var(--border);

    border-radius:
        999px;

    background:
        var(--surface-2);

    color:
        #c6cad1;

    font-size:
        12px;
}


.card-footer {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-top:
        17px;
}


.players {
    font-size:
        13px;

    color:
        var(--muted);
}


.players strong {
    color:
        var(--text);

    font-size:
        17px;
}


.primary-button {
    border:
        0;

    border-radius:
        13px;

    padding:
        11px 15px;

    background:
        var(--accent);

    color:
        white;

    font-weight:
        800;

    cursor:
        pointer;
}


.back-button {
    margin:
        18px 0 14px;

    padding:
        9px 0;

    border:
        0;

    background:
        none;

    color:
        var(--muted);

    font-size:
        14px;

    cursor:
        pointer;
}


.detalle {
    overflow:
        hidden;

    border:
        1px solid
        var(--border);

    border-radius:
        26px;

    background:
        var(--surface);
}


.detail-image {
    width:
        100%;

    aspect-ratio:
        16 / 10;

    object-fit:
        cover;

    background:
        var(--surface-2);
}


.detail-body {
    padding:
        21px;
}


.detail-title {
    margin:
        0 0 17px;

    font-size:
        28px;

    line-height:
        1.08;

    letter-spacing:
        -0.8px;
}


.detail-grid {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        10px;
}


.detail-box {
    padding:
        13px;

    border:
        1px solid
        var(--border);

    border-radius:
        15px;

    background:
        var(--surface-2);
}


.detail-label {
    color:
        var(--muted);

    font-size:
        10px;

    font-weight:
        750;

    text-transform:
        uppercase;

    letter-spacing:
        0.8px;
}


.detail-value {
    margin-top:
        5px;

    font-weight:
        750;

    font-size:
        14px;
}


.detail-section {
    margin-top:
        22px;
}


.detail-section h3 {
    margin:
        0 0 10px;

    font-size:
        14px;
}


.tags {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;
}


.tag {
    padding:
        6px 9px;

    border-radius:
        9px;

    background:
        rgba(
            240,
            100,
            44,
            0.12
        );

    color:
        #ffa16e;

    font-size:
        11px;
}


.player-list {
    display:
        grid;

    gap:
        8px;
}


.player {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        10px 12px;

    border-radius:
        12px;

    background:
        var(--surface-2);

    font-size:
        13px;
}


.bgg-link {
    display:
        inline-flex;

    margin-top:
        20px;

    color:
        var(--accent-2);

    text-decoration:
        none;

    font-size:
        13px;

    font-weight:
        750;
}


.empty {
    padding:
        50px 20px;

    text-align:
        center;

    border:
        1px dashed
        var(--border);

    border-radius:
        var(--radius);

    color:
        var(--muted);
}


.empty-icon {
    font-size:
        38px;
}


.empty h3 {
    margin:
        12px 0 6px;

    color:
        var(--text);
}


.empty p {
    max-width:
        320px;

    margin:
        0 auto;

    line-height:
        1.45;

    font-size:
        13px;
}


.bottom-nav {
    position:
        fixed;

    left:
        50%;

    bottom:
        0;

    z-index:
        50;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    width:
        min(
            620px,
            100%
        );

    height:
        var(--nav-height);

    transform:
        translateX(-50%);

    padding:
        7px 15px
        max(
            7px,
            env(
                safe-area-inset-bottom
            )
        );

    border-top:
        1px solid        var(--border);

    background:
        rgba(
            13,
            15,
            18,
            0.94
        );

    backdrop-filter:
        blur(20px);
}


.nav-item {
    border:
        0;

    background:
        transparent;

    color:
        var(--muted);

    font-size:
        11px;

    cursor:
        pointer;
}


.nav-item.active {
    color:
        var(--accent-2);
}


.nav-icon {
    display:
        block;

    margin-bottom:
        3px;

    font-size:
        20px;
}


.toast {
    position:
        fixed;

    left:
        50%;

    bottom:
        95px;

    z-index:
        100;

    max-width:
        calc(
            100% - 40px
        );

    transform:
        translate(
            -50%,
            20px
        );

    padding:
        11px 16px;

    border:
        1px solid
        var(--border);

    border-radius:
        999px;

    background:
        #24272d;

    color:
        white;

    opacity:
        0;

    pointer-events:
        none;

    transition:
        0.22s ease;

    font-size:
        12px;
}


.toast.show {
    opacity:
        1;

    transform:
        translate(
            -50%,
            0
        );
}


.hidden {
    display:
        none !important;
}


.loading {
    display:
        grid;

    place-items:
        center;

    min-height:
        180px;

    color:
        var(--muted);
}


@media (
    min-width: 700px
) {
    body {
        padding:
            20px 0;

        background:
            #08090b;
    }


    #app {
        overflow:
            hidden;

        border:
            1px solid
            var(--border);

        border-radius:
            30px;

        background:
            var(--bg);

        box-shadow:
            0 30px 90px
            rgba(
                0,
                0,
                0,
                0.42
            );
    }


    .bottom-nav {
        bottom:
            20px;

        border-radius:
            0 0 30px 30px;
    }
}


/* DM-PARTIDA-ACTIONS */

.detail-actions {
    margin-top: 22px;
}

.action-button {
    width: 100%;
    min-height: 52px;
    padding: 14px 18px;

    border: 0;
    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            var(--accent-2),
            var(--accent)
        );

    color: white;

    font-size: 15px;
    font-weight: 850;

    cursor: pointer;

    box-shadow:
        0 10px 28px
        rgba(
            240,
            100,
            44,
            0.22
        );
}

.action-button:active {
    transform: scale(0.985);
}

.action-button:disabled {
    cursor: default;

    opacity: 0.45;

    box-shadow: none;
}

.action-leave {
    background: #292d34;

    border:
        1px solid
        var(--border);

    color: #f3f4f6;

    box-shadow: none;
}


/* DM-ORGANIZADORES */

.access-screen {
    display: grid;
    place-items: center;
    min-height: calc(100vh - 100px);
}

.access-card {
    width: 100%;
    padding: 32px 24px;
    border: 1px solid var(--border);
    border-radius: 26px;
    background: var(--surface);
    text-align: center;
}

.access-card h2 {
    margin: 12px 0 8px;
}

.access-card p {
    margin: 8px auto;
    max-width: 360px;
    color: var(--muted);
    line-height: 1.5;
}

.admin-actions {
    margin: -8px 0 30px;
}

.action-button {
    width: 100%;
    min-height: 54px;
    padding: 14px 18px;
    border: 0;
    border-radius: 16px;
    background:
        linear-gradient(
            135deg,
            var(--accent-2),
            var(--accent)
        );
    color: white;
    font-size: 15px;
    font-weight: 850;
    cursor: pointer;
    box-shadow:
        0 10px 28px
        rgba(240, 100, 44, 0.22);
}

.action-button:active {
    transform: scale(0.985);
}


/* DM-CREAR-PARTIDA-V1 */

.create-header {
    margin: 20px 2px 18px;
}

.create-header h1 {
    margin: 4px 0 8px;
    font-size: 30px;
    letter-spacing: -0.8px;
}

.create-header p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
    font-size: 13px;
}

.create-card {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--surface);
    margin-bottom: 20px;
}

.create-card h2 {
    margin: 5px 0 17px;
    font-size: 21px;
}

.step-label {
    color: var(--accent-2);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1.2px;
}

.search-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 9px;
}

.dm-input {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 13px;
    outline: none;
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-size: 14px;
}

.dm-input:focus {
    border-color: rgba(240, 100, 44, 0.75);
    box-shadow: 0 0 0 3px rgba(240, 100, 44, 0.10);
}

.search-button {
    min-height: 48px;
    padding: 0 17px;
    border: 0;
    border-radius: 13px;
    background: var(--accent);
    color: white;
    font-weight: 800;
    cursor: pointer;
}

.form-hint {
    min-height: 18px;
    margin-top: 9px;
    color: var(--muted);
    font-size: 11px;
}

.bgg-results {
    display: grid;
    gap: 9px;
    margin-top: 10px;
}

.bgg-result {
    display: grid;
    grid-template-columns: 62px 1fr 20px;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface-2);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.bgg-result:active {
    transform: scale(0.99);
}

.bgg-result-image {
    width: 62px;
    height: 62px;
    overflow: hidden;
    border-radius: 11px;
    background: #111318;
}

.bgg-result-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bgg-no-image {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 27px;
}

.bgg-result-info {
    min-width: 0;
}

.bgg-result-info strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.bgg-result-info span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.bgg-result-info small {
    display: block;
    margin-top: 6px;
    color: #c4c8cf;
    font-size: 10px;
}

.bgg-result-arrow {
    color: var(--accent-2);
    font-size: 27px;
}

.selected-game {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 15px;
    align-items: center;
    margin-bottom: 21px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

.selected-game img,
.selected-fallback {
    width: 86px;
    height: 86px;
    border-radius: 15px;
    object-fit: cover;
    background: var(--surface-2);
}

.selected-fallback {
    display: grid;
    place-items: center;
    font-size: 38px;
}

.selected-game h2 {
    margin: 4px 0 3px;
}

.selected-game p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

.field {
    display: block;
}

.field > span {
    display: block;
    margin-bottom: 7px;
    color: #d5d8dd;
    font-size: 11px;
    font-weight: 700;
}

.field-full {
    grid-column: 1 / -1;
}

.dm-textarea {
    min-height: 100px;
    resize: vertical;
}

.input-suffix {
    position: relative;
}

.input-suffix span {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 11px;
    pointer-events: none;
}

.input-suffix input {
    padding-right: 45px;
}

.form-actions {
    display: grid;
    grid-template-columns: 1fr 1.45fr;
    gap: 10px;
    margin-top: 22px;
}

.secondary-button {
    min-height: 52px;
    padding: 12px 15px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface-2);
    color: var(--text);
    font-weight: 750;
    cursor: pointer;
}

.review-content {
    display: grid;
    gap: 15px;
}

.review-game {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 14px;
    align-items: center;
}

.review-game img {
    width: 80px;
    height: 80px;
    border-radius: 14px;
    object-fit: cover;
}

.review-game h2 {
    margin: 4px 0 0;
}

.review-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.review-box {
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface-2);
}

.review-box span {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 10px;
}

.review-box strong {
    font-size: 13px;
    line-height: 1.4;
}

.review-full {
    grid-column: 1 / -1;
}

.publish-note {
    padding: 13px 14px;
    border-radius: 13px;
    background: rgba(240, 100, 44, 0.09);
    color: #d8dbe0;
    line-height: 1.45;
    font-size: 11px;
}

@media (max-width: 410px) {

    .form-grid {
        grid-template-columns: 1fr;
    }

    .field-full {
        grid-column: auto;
    }

    .form-actions {
        grid-template-columns: 1fr;
    }

    .review-grid {
        grid-template-columns: 1fr;
    }

    .review-full {
        grid-column: auto;
    }
}


/* DM-GESTION-PARTIDA-V1 */

.manage-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 22px;
}

.danger-button {
    width: 100%;
    min-height: 52px;
    padding: 13px 16px;

    border:
        1px solid
        rgba(255, 90, 90, 0.28);

    border-radius: 15px;

    background:
        rgba(190, 45, 45, 0.12);

    color:
        #ff8d8d;

    font-size: 14px;
    font-weight: 800;

    cursor: pointer;
}

.danger-button:active {
    transform: scale(0.985);
}

.edit-save {
    margin-top: 22px;
}

@media (max-width: 410px) {

    .manage-actions {
        grid-template-columns: 1fr;
    }
}