@import url("https://p.typekit.net/p.css?s=1&k=qah0owd&ht=tk&f=51975&a=143966981&app=typekit&e=css");

@font-face {
    font-family:"acumin-variable";
    src:url("https://use.typekit.net/af/cd27bb/0000000000000000774be2a6/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/cd27bb/0000000000000000774be2a6/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/cd27bb/0000000000000000774be2a6/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}

@font-face {
    font-family:"acumin-variable-500";
    src:url("https://use.typekit.net/af/cd27bb/0000000000000000774be2a6/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/cd27bb/0000000000000000774be2a6/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/cd27bb/0000000000000000774be2a6/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:500;font-stretch:normal;
}

@font-face {
    font-family:"acumin-variable-800";
    src:url("https://use.typekit.net/af/cd27bb/0000000000000000774be2a6/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/cd27bb/0000000000000000774be2a6/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/cd27bb/0000000000000000774be2a6/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:800;font-stretch:normal;
}

@font-face {
    font-family:"acumin-variable-500ec";
    src:url("https://use.typekit.net/af/cd27bb/0000000000000000774be2a6/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/cd27bb/0000000000000000774be2a6/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/cd27bb/0000000000000000774be2a6/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:500;font-stretch:extra-condensed;
}

@font-face {
    font-family:"acumin-variable-700ec";
    src:url("https://use.typekit.net/af/cd27bb/0000000000000000774be2a6/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/cd27bb/0000000000000000774be2a6/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/cd27bb/0000000000000000774be2a6/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:700;font-stretch:extra-condensed;
}

@font-face {
    font-family:"acumin-variable-800ec";
    src:url("https://use.typekit.net/af/cd27bb/0000000000000000774be2a6/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/cd27bb/0000000000000000774be2a6/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/cd27bb/0000000000000000774be2a6/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:800;font-stretch:extra-condensed;
}

.tk-acumin-variable { font-family: "acumin-variable",sans-serif; }

.activities-bg {
    width: 100%;
}
.play-image-container {
    padding-bottom: 15px;
}
.activities-info {
    display: flex;
    flex-direction: row;
    width: 100%;
    position: relative;
    max-width: 1920px; 
    margin: 0 auto;
    overflow: hidden; 
    padding: 1em;
    background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 9, 48, 1) 77%, rgba(0, 12, 74, 1) 100%);
}

.activities-tag-container {
    display: flex;
    flex-direction: row;
}

.activities-tag {
    background-color: #2264CE;
    border-radius: 0.25rem;
    padding:0rem 0.25rem 0rem 0.25rem;
    margin-right: 0.5rem;
    font-family: "acumin-variable-500",sans-serif;  
    font-size: 1rem;
    text-transform: uppercase;
    text-wrap: nowrap;
}

.activities-label {
    text-transform: uppercase;
    color: #FFD753;
    font-size: 5rem;
    font-weight: bold;
    font-family: "acumin-variable-800ec",sans-serif;  
    line-height: 1;
}

.activities-description {
    font-family: "acumin-variable-500",sans-serif;  
    font-size: 1rem;
}

.activities-buttons-container {
    display: flex;
    flex-direction: column;
    width: 30%; 
    padding-left: 5%;
}

.activities-play-button {
    font-size: 2rem;
    font-weight: bold;
    font-family: "acumin-variable-800",sans-serif;  
    line-height: 1;
    background-color: #E38D2D;
    color: white;
    border-radius: 0.5rem;
    margin-top: 1rem;
}

.activities-button-container-outer {
    display: flex;
    flex-direction: column;
    background-color: black;
    border-radius: 0.25rem;
    padding-top: 10px;
    margin-top: 6rem;
    margin-bottom: 1rem;
}

.activities-mobile-subtitle {
    font-family: "acumin-variable-500ec",sans-serif;  
    color: white;
    padding: 5px;
    line-height: 0;
    font-size: 0.75rem;
}

.activities-button-container {
    display: flex;
}

.activities-image-container {
    flex: 1;
    min-width: 0; 
    width: 60%;
}

.activities-bg, 
.game-landing-image,
.activities-image-mobile {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.activities-selection-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 0.5em;
    padding: 2em 0em;
}
.activities-selection-label {
    color: #ffd75f;
    font-weight: bold;
    font-family: "acumin-variable-800ec", sans-serif;
    text-transform: uppercase;
    font-size: 2em;
    background-color: black;
    padding: 1em;
}

.activities-card-container {
    width: calc(50% - 1em); 
    display: flex;
    max-width: 50em;
    margin: 0 auto;
    border: 0.0625em solid #333;
    border-radius: 0.5em;
    background-color: #233B4A;
    box-shadow: 0 0 1.25em rgba(0, 0, 0, 0.5);
    aspect-ratio: 2.333 / 1;
    font-size: calc(10px + 0.2vw) ; 
}

.activities-card-image {
    flex: 0 0 50%;
    position: relative;
    background-color: #0a0e15;
    overflow: hidden;
    aspect-ratio: 1.167 / 1;
}

.activities-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-top-left-radius: 0.5em;
    border-bottom-left-radius: 0.5em;
}
.activities-card-content {
    flex: 0 0 50%;
    padding: 0; 
    display: flex;
    flex-direction: column;
}
.activities-card-label {
    background-color: black;
    width: 100%; 
    padding: 1em;
    border-top-right-radius: 0.5em ;
}
.activities-card-title {
    font-size: 2.5em;
    font-weight: bold;
    color: #ffd75f;
    font-family: "acumin-variable-800ec", sans-serif;
    text-transform: uppercase;
    padding: 0.125em 0 0.25em;
    letter-spacing: 0.0625em;
    line-height: 1;
}

.activities-card-categories {
    display: flex;
    gap: 0.625em;
}

.category-button {
    background-color: #2264ce;
    color: white;
    border: none;
    border-radius: 0.3125em;
    padding: 0.1em 0.5em;
    font-size: 0.775em;
    cursor: pointer;
    justify-content: center;
    font-family: "acumin-variable-500", sans-serif;
    text-transform: uppercase;
    text-wrap: nowrap;
}

.activities-card-description {
    font-size: 1em;
    line-height: 1.5;
    color: #e0e0e0;
    margin: 1em;
    font-family: "acumin-variable-500", sans-serif;
}

.learn-more {
    align-self: flex-end;
    background-color: #e38d2d;
    color: white;
    border: none;
    padding: 0.5em 1.5em;
    border-radius: 0.5em;
    font-size: 1.125em;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.0625em;
    font-family: "acumin-variable-800", sans-serif;
    line-height: 1;
    background-color: #E38D2D;
    color: white;
    margin: 0.25em 1em;
}
.dominfo-info {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    max-width: 1920px; 
    margin: 0 auto;
    overflow: hidden; 
}

.dominfo-title-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.dominfo-container {
    background-color: #233B4A;
    border-radius: 0.75em;
    padding: 1.5em;
    margin: 1em;
    overflow: hidden;
    font-size: calc(8px + 0.2vw);
}

.dominfo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: black;
    padding: 0.75em 1em;
    margin: -1.5em -1.5em 1em -1.5em;
}

.dominfo-developer-info {
    display: flex;
    align-items: center;
}

.dominfo-developer-label {
    font-size: 1.1em;
    margin-right: 0.5em;
    opacity: 0.8;
    font-family: "acumin-variable-500",sans-serif;  
}

.dominfo-developer-name {
    font-size: 1.3em;
    font-weight: bold;
    font-family: "acumin-variable-500",sans-serif;  
}

.dominfo-tags {
    display: flex;
    gap: 0.75em;
}

.dominfo-tag {
    background-color: #2264CE;
    border-radius: 0.25rem;
    padding:0rem 0.25rem 0rem 0.25rem;
    margin-right: 0.5rem;
    font-family: "acumin-variable-500",sans-serif;  
    font-size: 1rem;
    text-transform: uppercase;
    text-wrap: nowrap;
}

.dominfo-content {
    display: flex;
    gap: 2em;
}

.dominfo-description {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.dominfo-title {
    font-size: 3em;
    font-weight: bold;
    color: #ffd75f;
    font-family: "acumin-variable-800ec", sans-serif;
    line-height: 1.2;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.dominfo-text {
    font-size: 1.3em;
    line-height: 1.2;
    margin-bottom: 1em;
    color: #e0e0e0;
    font-family: "acumin-variable-500", sans-serif;
}

.dominfo-trailer {
    flex: 1;
    position: relative;
    border-radius: 0.75em;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.dominfo-trailer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dominfo-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4em;
    height: 4em;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.dominfo-play-button::before {
    content: "";
    width: 0;
    height: 0;
    border-top: 1em solid transparent;
    border-left: 1.5em solid white;
    border-bottom: 1em solid transparent;
    margin-left: 0.25em;
}

.dominfo-stats {
    display: flex;
    margin-top: 1em;
    background-color: black;
    border-radius: 0.5em;
    padding: 0.75em;
    justify-content: space-around;
    max-width: 35em;
}

.dominfo-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1em;
}

.dominfo-stat-value {
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 0.25em;
    display: flex;
    align-items: center;
}

.dominfo-star-icon {
    display: inline-block;
    margin-left: 0.25em;
    font-size: 1.2em;
}

.dominfo-stat-label {
    font-size: 0.9em;
    color: #a0a0a0;
}

.dominfo-age-rating-help {
    cursor: pointer;
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: #666;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 1em;
    font-size: 0.8em;
    margin-left: 0.25em;
}

.dominfo-screenshots-container {
    padding: 1.5em;
    background-color: #233B4A;
    border-radius: 1em;
    overflow: hidden;
    font-size: calc(8px + 0.2vw);
    aspect-ratio: 2.692;
    margin: 1em;
}

.dominfo-screenshots-header {
    padding: 1em 0 1.5em 0;
    background-color: black;
    padding: 0.75em 1em;
    margin: -1.5em -1.5em 1em -1.5em;
}

.dominfo-screenshots-title {
    font-size: 3em;
    font-weight: bold;
    color: #ffd75f;
    font-family: "acumin-variable-800ec", sans-serif;
    line-height: 1.2;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.dominfo-screenshots-gallery {
    display: flex;
    gap: 1em;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 1em;
}

.dominfo-screenshot-item {
    position: relative;
    flex: 0 0 auto;
    width: 48%;
    border-radius: 1em;
    overflow: hidden;
    box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.3);
}

.dominfo-screenshot-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 1em;
}

.dominfo-features-container {
    max-width: 100%;
    background-color: #233B4A;
    border-radius: 1em;
    overflow: visible;
    font-size: calc(8px + 0.2vw);
    position: relative;
    margin: 1em;
}

.dominfo-features-header {
    background-color: black;
    padding: 1em 2em;
    position: relative;
    border-radius: 0.5em 0.5em 0em 0em;
}

.dominfo-features-title {
    font-size: 3em;
    font-weight: bold;
    color: #ffd75f;
    font-family: "acumin-variable-800ec", sans-serif;
    line-height: 1.2;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.dominfo-features-content {
    display: flex;
    padding: 2em;
    position: relative;
}

.dominfo-features-list {
    flex: 0 0 60%;
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

.dominfo-feature-item {
    display: flex;
    align-items: center;
    background-color: #050708af;
    border-radius: 1em;
    padding: 1.5em;
    box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.2);
}

.dominfo-feature-icon {
    width: 8em;
    height: 8em;
    border-radius: 0.5em;
    margin-right: 1.5em;
    overflow: hidden;
    background-color: #000;
    flex-shrink: 0;
    padding: 1em;
}

.dominfo-feature-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dominfo-feature-details {
    flex-grow: 1;
}

.dominfo-feature-title {
    font-size: 2em;
    font-weight: bold;
    color: #ffd75f;
    margin-bottom: 0.5em;
    font-family: "acumin-variable-500",sans-serif;  
}

.dominfo-feature-description {
    font-size: 1.3em;
    line-height: 1.2;
    margin-bottom: 1.5em;
    color: #e0e0e0;
    font-family: "acumin-variable-500", sans-serif;
}
.dominfo-features-character {
    position: absolute;
    right: 2em;
    bottom: 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    z-index: 10; 
    pointer-events: none; 
}

.dominfo-features-character img {
    height: 100%;
    object-fit: contain;
}
.dominfo-trailer-container{
    display: none;
}
.dominfo-tag-container-mobile {
    display: none;
}
.dominfo-about-container {
    display: none;
}
.dominfo-mobile-container {
    display: none;
}
/*  ------- Reactive Sizing -------  */


/* Mobile Screen */
@media screen and (max-width: 790px) {
    .activities-info {
        flex-direction: column;
        aspect-ratio: auto; 
    }
    
    .activities-buttons-container {
        width: 100%;
        margin-top: 1rem;
    }
    
    .activities-label {
        font-size: 3em; 
    }
    .game-landing-image {
        display: none;
    }
    .activities-image-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .activities-card-container {
        width: 100%;
    }
    .activities-tag{
        font-size: 0.35em;
    }
    .dominfo-features-container {
        display: none;
    }
    .dominfo-trailer-container{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 1.5em;
        background-color: #233B4A;
        border-radius: 1em;
        overflow: hidden;
        font-size: calc(8px + 0.2vw);
        margin: 1em;
    }
    .dominfo-trailer-header {
        padding: 1em 0 1.5em 0;
        background-color: black;
        padding: 0.75em 1em;
        margin: -1.5em -1.5em 1em -1.5em;
        width: 100%;
    }
    
    .dominfo-trailer-title {
        font-size: 3em;
        font-weight: bold;
        color: #ffd75f;
        font-family: "acumin-variable-800ec", sans-serif;
        line-height: 1.2;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        text-align: center;
    }
    .dominfo-trailer {
        padding: 1em;
    }
    .dominfo-container {
        display: none;
    }
    .dominfo-screenshots-title {
        text-align: center;
        font-size: 3em;
    }
    .activities-play-button {
        display: none;
    }
    .dominfo-title-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .dominfo-tag-container-mobile {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .dominfo-about-container {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-color: #233B4A;
        border-radius: 0.5em;
        overflow: hidden;
        font-size: calc(8px + 0.2vw);
        margin: 1em;
        padding: 1em;
    }
    
    .dominfo-about-header {
        text-align: center;
    }
    
    .dominfo-about-title {
        font-size: 3em;
        font-weight: bold;
        color: #ffd75f;
        font-family: "acumin-variable-800ec", sans-serif;
        line-height: 1.2;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        text-align: center;
    }
    
    .dominfo-about-description {
        font-size: 1.25em;
        line-height: 1.2;
        color: #e0e0e0;
        font-family: "acumin-variable-500", sans-serif;
        flex: 1;
    }
    
    .dominfo-about-tagline {
        font-size: 1.2em;
        line-height: 1.2;
        margin: 1em;
        color: #e0e0e0;
        font-family: "acumin-variable-500", sans-serif;
    }
    
    .dominfo-about-cta {
        text-align: center;
    }
    
    .dominfo-about-cta-text {
        font-size: 1.2em;
        line-height: 1.2;
        color: #e0e0e0;
        font-family: "acumin-variable-500", sans-serif;
    }
    
    .dominfo-about-stores {
        display: flex;
        justify-content: center;
        gap: 1em;
        flex-wrap: wrap;
    }
    .dominfo-about-stores-button-container {
        width: 4rem;
    }
    .dominfo-about-stores-button {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .activities-description {
        display: none;
    }
    .activities-buttons-container {
        display: none;
    }
    .activities-play-button-mobile {
        font-size: 1rem;
        font-weight: bold;
        font-family: "acumin-variable-800", sans-serif;
        line-height: 1;
        background-color: #E38D2D;
        color: white;
        border-radius: 0.5rem;
        margin-top: 1rem;
        padding: 0.5em 1em;
    }

    .dominfo-mobile-container {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-color: #233B4A;
        border-radius: 0.5em;
        overflow: hidden;
        font-size: calc(8px + 0.2vw);
        margin: 1em;
        padding: 1em;
    }
    
    .dominfo-mobile-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.5em;
        gap: 1em;
    }
    
    .dominfo-mobile-description {
        font-size: 1.6em;
        line-height: 1.4;
        color: #ffffff;
        flex: 1;
        font-family: "acumin-variable-500", sans-serif;
    }
    
    .dominfo-mobile-cta-button {
        background-color: #e38d2d;
        color: white;
        text-decoration: none;
        padding: 1em 1.5em;
        border-radius: 0.5em;
        font-size: 1.6em;
        font-weight: bold;
        white-space: nowrap;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-align: center;
        flex-shrink: 0;
    }
    
    .dominfo-mobile-download {
        background-color: #121824;
        border-radius: 1em;
        padding: 1.5em;
        text-align: center;
    }
    
    .dominfo-mobile-download-text {
        font-size: 1.25em;
        line-height: 1.2;
        color: #e0e0e0;
        font-family: "acumin-variable-500", sans-serif;
    }
    
    .dominfo-mobile-stores {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1em;
    }
    
    .dominfo-mobile-store-button {
        display: block;
        border: 0.1em solid #666;
        border-radius: 0.8em;
        overflow: hidden;
        width: 100%;
        max-width: 20em;
        height: 4em;
        background-color: #000;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: transform 0.2s ease;
    }
    .dominfo-mobile-store-button img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .dominfo-mobile-about-cta {
        text-align: center;
        background-color: #00040D;
        border-radius: 0.5em;
        padding: 0.5em;
        width: 100%;
    }
}

/* Small Screen */
@media screen and (min-width: 791px) and (max-width: 1049px) {
    .activities-card-container {
        width: 100%;
    }
}
/* Medium Screen */
@media screen and (min-width: 1050px) and (max-width: 1280px) {
    .activities-card-container {
        width: 100%;
    }
}