/* Typography */

h1,h2,h3,h4,h5,h6 {
    color: var(--primary);
    font-weight: 700;
    line-height: 1.2;
}

h1 {
    font-size: 3.5rem;
}

h2 {
    font-size: 2.4rem;
}

h3 {
    font-size: 1.8rem;
}

p {
    color: var(--text);
    line-height: 1.8;
}

a {
    color: inherit;
}

.section-label {
    color: var(--info);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.subtitle {
    color: var(--info);
}

/* Images */

.profile-image {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--primary);
    box-shadow: var(--shadow-medium);
    flex-shrink: 0;
}

/* Cards */

.card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    transition: transform var(--transition),border-color var(--transition),box-shadow var(--transition);
}

.card:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
    box-shadow: var(--shadow-medium);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.card-title {
    color: var(--primary);
    font-size: 1.25rem;
    font-weight: 700;
}

.card-description {
    color: var(--info);
}

/* Code */

.code-block {
    width: 100%;
    overflow-x: auto;
    background: var(--surface-dark);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    font-family: var(--font);
}

.code-block code {
    color: var(--text);
    white-space: pre;
}

/* Message Boxes */

.info-box,
.success-box,
.warning-box,
.error-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-left: 5px solid;
    border-radius: var(--radius);
    padding: 22px;
}

.info-box {
    background: rgba(116,146,161,.12);
    border-color: var(--info);
}

.success-box {
    background: rgba(70,185,106,.12);
    border-color: var(--success);
}

.warning-box {
    background: rgba(240,185,77,.12);
    border-color: var(--warning);
}

.error-box {
    background: rgba(230,74,69,.12);
    border-color: var(--danger);
}

/* Buttons */

.button,
.button-outline,
.button-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    padding: 12px 24px;
    text-decoration: none;
    transition: background var(--transition),color var(--transition),border-color var(--transition),transform var(--transition);
}

.button {
    background: var(--primary);
    color: white;
    border: none;
}

.button:hover {
    transform: translateY(-2px);
}

.button-outline {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}

.button-outline:hover {
    background: var(--primary);
    color: white;
}

.button-danger {
    background: var(--danger);
    color: white;
    border: none;
}

.button-danger:hover {
    transform: translateY(-2px);
}

/* Lists */

.list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
}

.list li {
    color: var(--text);
}

/* Dividers */

.divider {
    width: 100%;
    height: 1px;
    background: var(--border);
}

/* Tags */

.tag {
    display: inline-flex;
    align-items: center;
    background: var(--surface-light);
    color: var(--info);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: .8rem;
    font-weight: 600;
}

/* Tables */

.table-wrapper {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

th {
    color: var(--primary);
}

tr:hover {
    background: rgba(255,255,255,.03);
}

/* Updates */

.updates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(340px,1fr));
    gap: 30px;
    margin-top: 50px;
}

/* Updates */

.update-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none !important;
    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.update-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
    box-shadow: var(--shadow-large);
}

.update-card-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    text-decoration: none !important;
    color: inherit;
}

.update-card-link *,
.update-card-link h3,
.update-card-link p,
.update-card-link span {
    text-decoration: none !important;
}

.update-card img {
    width: 100%;
    height: 205px;
    object-fit: cover;
}

.update-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
    padding: 24px;
}

.update-version {
    color: var(--primary);
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none !important;
}

.update-content h3 {
    color: var(--text);
    text-decoration: none !important;
}

.update-content p {
    color: var(--info);
    text-decoration: none !important;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;

    min-height: 4.5em;
    line-height: 1.5;
}

.update-date {
    margin-top: auto;
    color: var(--info);
    font-size: .85rem;
    text-decoration: none !important;
}

.update-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
    text-align: center;
}

.update-header img {
    width: 320px;
    height: 180px;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-medium);
}

.update-header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}


/* Like */

.update-like {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    min-height: 82px;

    padding:
        0 24px 22px;
}


.like-button {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    min-width: 78px;
    min-height: 52px;

    padding: 8px 16px;

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

    background: var(--surface);

    color: var(--info);

    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease;

}


.like-button:hover {

    transform:
        translateY(-3px);

    border-color:
        var(--primary);

    color:
        var(--primary);

    box-shadow:
        var(--shadow-medium);

}


.like-button:active {

    transform:
        scale(.92);

}


.like-button:disabled {

    opacity: .6;

    cursor: wait;

}


.like-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    flex-shrink: 0;
}

.like-icon img {
    display: block;

    width: 40px;
    height: 40px;

    image-rendering: pixelated;
    image-rendering: crisp-edges;

    object-fit: contain;

    transition:
        transform .2s ease;
}

.like-button:hover .like-icon img {
    transform: scale(1.15);
}


.like-button.liked {

    color:
        var(--primary);

    border-color:
        var(--primary);

    background:
        color-mix(
            in srgb,
            var(--primary) 12%,
            var(--surface)
        );

}


.like-count {

    min-width: 22px;

    text-align: center;

    font-size: 1rem;

}


/* Like animation */

.like-pop {

    animation:
        like-pop .4s cubic-bezier(.2,1.6,.4,1);

}


@keyframes like-pop {

    0% {

        transform:
            scale(1);

    }

    35% {

        transform:
            scale(1.65)
            rotate(-8deg);

    }

    55% {

        transform:
            scale(.85)
            rotate(5deg);

    }

    75% {

        transform:
            scale(1.2)
            rotate(-2deg);

    }

    100% {

        transform:
            scale(1)
            rotate(0);

    }

}


/* Floating hearts */

.floating-hearts {

    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    height: 100vh;

    overflow: hidden;

    pointer-events: none;

    z-index: 9998;

}


.floating-heart {

    position: absolute;

    bottom: -50px;

    display: block;

    object-fit: contain;

    image-rendering: pixelated;

    pointer-events: none;

    animation:
        floating-heart-rise
        linear
        forwards;

}


@keyframes floating-heart-rise {

    0% {

        transform:
            translate3d(
                0,
                0,
                0
            )
            rotate(0deg)
            scale(.7);

    }

    20% {

        transform:
            translate3d(
                calc(var(--heart-drift) * .2),
                -20vh,
                0
            )
            rotate(-8deg)
            scale(2);

    }

    45% {

        transform:
            translate3d(
                calc(var(--heart-drift) * -.15),
                -45vh,
                0
            )
            rotate(8deg)
            scale(3);

    }

    70% {

        transform:
            translate3d(
                calc(var(--heart-drift) * .55),
                -70vh,
                0
            )
            rotate(-6deg)
            scale(1.05);

    }

    100% {

        transform:
            translate3d(
                var(--heart-drift),
                -115vh,
                0
            )
            rotate(10deg)
            scale(.8);

    }

}


/* Like Toast */

.like-toast {

    position: fixed;

    left: 50%;
    bottom: 30px;

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

    padding:
        14px 22px;

    background:
        var(--surface);

    color:
        var(--text);

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

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow-large);

    font-size:
        .9rem;

    font-weight:
        600;

    opacity:
        0;

    pointer-events:
        none;

    z-index:
        10000;

    transition:
        opacity .3s ease,
        transform .3s ease;

}


.like-toast.show {

    opacity:
        1;

    transform:
        translate(-50%, 0);

}

/* ========================================================= */
/* MCREATOR STYLE PROCEDURE BLOCK */
/* ========================================================= */

.procedure-card {

    --color: var(--block-color);

    position: relative;

    margin-bottom: 20px;

    padding: 18px 22px;
    padding-left: 34px;

    background: var(--color);

    border-radius: 8px;

    overflow: visible;

    transition:
        transform .15s ease,
        filter .15s ease;

    box-shadow:
        inset 0 -4px rgba(0,0,0,.20),
        0 6px 18px rgba(0,0,0,.25);

}

/* Left connector */

.procedure-card::before{

    content:"";

    position:absolute;

    left:-12px;
    top:18px;

    width:22px;
    height:32px;

    background:inherit;

    border-radius:8px 0 0 8px;

}

/* Right socket */

.procedure-card::after{

    content:"";

    position:absolute;

    right:-10px;
    top:18px;

    width:18px;
    height:32px;

    background:#1b1b1b;

    border-radius:0 8px 8px 0;

}

.procedure-card:hover{

    transform:translateY(-2px);

    filter:brightness(1.05);

}

.procedure-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:15px;

}

.procedure-title{

    color:white;

    font-size:17px;

    font-weight:700;

    line-height:1.45;

    word-break:break-word;

}

.procedure-description{

    margin-top:12px;

    color:rgba(255,255,255,.92);

    line-height:1.6;

    font-size:15px;

}

.procedure-tags{

    display:flex;

    flex-wrap:wrap;

    gap:6px;

}

.procedure-tag{

    padding:4px 10px;

    border-radius:999px;

    background:rgba(0,0,0,.22);

    color:white;

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.4px;

}

.tag-action{

    background:#2e8b57;

}

.tag-data{

    background:#3d74d8;

}

.tag-suggestion{

    background:#d68b1d;

}

.tag-category{

    background:rgba(255,255,255,.18);

}

/* ========================================================= */
/* HEADER */
/* ========================================================= */

.procedure-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

}

.procedure-title{

    font-size:17px;

    font-weight:700;

    line-height:1.45;

    color:white;

    word-break:break-word;

}

/* ========================================================= */
/* TAGS */
/* ========================================================= */

.procedure-tags{

    display:flex;

    gap:8px;

    flex-wrap:wrap;

}

.procedure-tag{

    padding:4px 10px;

    border-radius:999px;

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

    color:white;

}

/* ========================================================= */
/* DESCRIPTION */
/* ========================================================= */

.procedure-description{

    color:#d4d4d4;

    line-height:1.65;

    font-size:15px;

}

/* ========================================================= */
/* CATEGORY COLORS */
/* ========================================================= */

.category-block{
    --block-color:#ad9d4b;
}

.category-entity{
    --block-color:#4a57a8;
}

.category-component{
    --block-color:#913d3d;
}

.category-player{
    --block-color:#0f868a;
}

.category-event{
    --block-color:#503885;
}

.category-item{
    --block-color:#8a0f42;
}

.category-math{
    --block-color:#2f496b;
}

.category-variable{
    --block-color:#2d8f54;
}

.category-trigger{
    --block-color:#d4701f;
}

/* ========================================================= */
/* TAG COLORS */
/* ========================================================= */

.tag-action{

    background:#2e8b57;

}

.tag-data{

    background:#4267c7;

}

.tag-suggestion{

    background:#d58520;

}

.tag-category{

    background:rgba(255,255,255,.08);

}

/* ========================================================= */
/* SMALL ANIMATION */
/* ========================================================= */

.procedure-card:hover .procedure-title{

    color:white;

}

/* ========================================================= */
/* MCreator block shape */
/* ========================================================= */

.procedure-main{
    position:relative;
    z-index:2;
}

.procedure-top-notch,
.procedure-bottom-notch{

    position:absolute;

    left:30px;

    width:42px;
    height:10px;

    background:#1b1b1b;

    border-radius:0 0 6px 6px;

    z-index:3;

}

.procedure-top-notch{

    top:-2px;

    border-radius:0 0 6px 6px;

}

.procedure-bottom-notch{

    bottom:-2px;

    border-radius:6px 6px 0 0;

}

.procedure-title-row{

    display:flex;

    align-items:flex-start;

    gap:14px;

}

.procedure-icon{

    width:38px;
    height:38px;

    min-width:38px;

    border-radius:10px;

    background:rgba(255,255,255,.16);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    box-shadow:
        inset 0 1px rgba(255,255,255,.15);

}

/* ========================================= */
/* DOWNLOADS */
/* ========================================= */

.downloads-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:25px;

}

.download-card{

    background:#22242b;

    border:2px solid rgba(255,255,255,.08);

    border-radius:18px;

    padding:25px;

    transition:.2s;

}

.download-card:hover{

    transform:translateY(-5px);

    border-color:#6aa8ff;

}

.download-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:15px;

}

.download-version{

    font-size:24px;

    font-weight:700;

}

.download-support{

    color:#bbb;

    margin-top:5px;

}

.download-icon{

    font-size:46px;

}

.download-file{

    color:#ddd;

    margin:20px 0;

    word-break:break-all;

}

.download-thanks {

    text-align:center;

    width:100%;

    font-size:18px;

    color:#bdbdbd;

    font-style:italic;

    margin-top:20px;

}

/* ========================================================= */
/* FOOTER */
/* ========================================================= */


.site-footer {

    margin-top:80px;

    padding:45px 20px;

    background:#15151b;

    border-top:2px solid rgba(255,255,255,.08);

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:25px;

}


/* Profile image */

.footer-avatar img {

    width:110px;

    height:110px;

    border-radius:50%;

    object-fit:cover;

}


/* Text */

.footer-info h3 {

    margin:0 0 10px;

    color:white;

    font-size:22px;

}


.footer-info p {

    margin:6px 0;

    color:#cfcfcf;

    line-height:1.6;

    max-width:600px;

}


/* Links */

.footer-links {

    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

}


.footer-links a {

    color:#aaa;

    text-decoration:none;

    transition:.2s;

}


.footer-links a:hover {

    color:white;

}


/* Logos */

.footer-logos {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

}


.footer-logos img {

    object-fit:contain;

    opacity:.85;

}


.footer-logos img:first-child {

    width:80px;

    height:45px;

}


.footer-logos img:last-child {

    width:45px;

    height:45px;

}

/* ========================================================= */
/* FEEDBACK FORM */
/* ========================================================= */


.feedback-form {

    display:flex;

    flex-direction:column;

    gap:14px;

    max-width:700px;

    margin:auto;

}



.feedback-form label {

    color:white;

    font-weight:700;

    font-size:14px;

    margin-top:10px;

}



.feedback-form input,
.feedback-form select,
.feedback-form textarea {


    width:100%;

    box-sizing:border-box;

    padding:14px 16px;


    background:#1f1f25;

    color:white;


    border:2px solid rgba(255,255,255,.1);

    border-radius:12px;


    font-family:"JetBrains Mono", monospace;

    font-size:14px;


    transition:.2s;

}



.feedback-form textarea {

    min-height:150px;

    resize:vertical;

}



.feedback-form input:focus,
.feedback-form select:focus,
.feedback-form textarea:focus {


    outline:none;

    border-color:#4a57a8;


    box-shadow:

        0 0 15px rgba(74,87,168,.35);

}



.feedback-form select option {

    background:#1f1f25;

    color:white;

}



/* Status message */


#status {


    text-align:center;

    margin-top:25px;

    color:white;

    font-weight:700;

}




/* ========================================================= */
/* EMAIL WARNING MODAL */
/* ========================================================= */

.email-warning-modal {

    position:fixed;

    inset:0;

    z-index:9999;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:25px;

    background:rgba(0,0,0,.75);

    backdrop-filter:blur(6px);

    opacity:0;

    visibility:hidden;

    transition:
        opacity .2s ease,
        visibility .2s ease;

}


.email-warning-modal.active {

    opacity:1;

    visibility:visible;

}


/* ========================================================= */
/* MODAL BOX */
/* ========================================================= */

.email-warning-box {

    width:100%;

    max-width:680px;

    max-height:90vh;

    overflow-y:auto;

    padding:35px;

    border-radius:18px;

    background:#1f1f25;

    border:2px solid rgba(255,255,255,.1);

    box-shadow:
        0 25px 80px rgba(0,0,0,.55);

    text-align:center;

    transform:translateY(15px) scale(.97);

    transition:
        transform .2s ease;

}


.email-warning-modal.active
.email-warning-box {

    transform:translateY(0) scale(1);

}


/* ========================================================= */
/* WARNING IMAGE */
/* ========================================================= */

.email-warning-image {

    display:block;

    width:90px;

    height:90px;

    object-fit:contain;

    margin:0 auto 20px;

}


.email-warning-box h2 {

    margin:0 0 25px;

    color:#e6b84a;

    font-size:28px;

    text-transform:uppercase;

    letter-spacing:1px;

}


/* ========================================================= */
/* TEXT */
/* ========================================================= */

.email-warning-text {

    text-align:left;

}


.email-warning-text p {

    margin:0 0 16px;

    color:#d4d4d4;

    line-height:1.65;

    font-size:15px;

}


.email-warning-question {

    margin:25px 0;

    color:white;

    font-weight:600;

    line-height:1.5;

}


/* ========================================================= */
/* BUTTONS */
/* ========================================================= */

.email-warning-buttons {

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

}


.email-warning-buttons button {

    cursor:pointer;

}


/* ========================================================= */
/* PREVENT BACKGROUND SCROLL */
/* ========================================================= */

body.modal-open {

    overflow:hidden;

}


/* ========================================================= */
/* MOBILE */
/* ========================================================= */

@media(max-width:700px){

    .email-warning-modal {

        padding:15px;

    }


    .email-warning-box {

        max-height:92vh;

        padding:25px 20px;

        border-radius:15px;

    }


    .email-warning-image {

        width:70px;

        height:70px;

        margin-bottom:15px;

    }


    .email-warning-box h2 {

        font-size:23px;

    }


    .email-warning-text p {

        font-size:14px;

    }


    .email-warning-buttons {

        flex-direction:column;

    }


    .email-warning-buttons button {

        width:100%;

    }

}


/* ========================================================= */
/* VERSION SELECT */
/* ========================================================= */

.version-selector select {
    width: 100%;
}


.version-selector select option:disabled {
    color: #777;
    background: #303030;
}


.version-option-disabled {
    color: #777 !important;
}



/* ========================================================= */
/* SELECTED VERSIONS */
/* ========================================================= */

.selected-versions {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 12px;

}



/* ========================================================= */
/* VERSION BAR */
/* ========================================================= */

.selected-version-tag {

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    box-sizing: border-box;

    min-height: 38px;

    padding: 6px 8px 6px 14px;

    gap: 12px;

    background: #20232b;

    border: 1px solid rgba(255,255,255,.12);

    border-radius: 8px;

    color: #e8e8e8;

    font-size: 14px;

    line-height: 1;

}



/* ========================================================= */
/* VERSION TEXT */
/* ========================================================= */

.version-tag-text {

    display: flex;

    align-items: center;

    white-space: nowrap;

}



/* ========================================================= */
/* REMOVE BUTTON */
/* ========================================================= */

.version-tag-remove {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    width: 24px;

    height: 24px;

    min-width: 24px;

    min-height: 24px;

    padding: 0;

    margin: 0;

    border: 2px solid #e64a45;

    border-radius: 50%;

    background: transparent;

    color: transparent;

    cursor: pointer;

    flex-shrink: 0;

    transition:
        background .2s ease,
        transform .2s ease,
        border-color .2s ease;

}



/* ========================================================= */
/* X LINES */
/* ========================================================= */

.version-tag-remove .remove-line {

    position: absolute;

    left: 50%;

    top: 50%;

    width: 11px;

    height: 2px;

    background: #e64a45;

    border-radius: 2px;

    pointer-events: none;

    transform-origin: center;

}


.version-tag-remove .remove-line-one {

    transform:
        translate(-50%, -50%)
        rotate(45deg);

}


.version-tag-remove .remove-line-two {

    transform:
        translate(-50%, -50%)
        rotate(-45deg);

}



/* ========================================================= */
/* REMOVE HOVER */
/* ========================================================= */

.version-tag-remove:hover {

    background: #e64a45;

    border-color: #e64a45;

    transform: scale(1.08);

}


.version-tag-remove:hover .remove-line {

    background: white;

}



/* ========================================================= */
/* REMOVE ACTIVE */
/* ========================================================= */

.version-tag-remove:active {

    transform: scale(.94);

}