/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Box Size and Reset
- Utilities
- Base Styles
- Typography
- Links
- Buttons

- Menu
- Game Card
- Game Overlay

*/

/* Box Size and Reset
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html {
  box-sizing: border-box;
}
*, 
*::before, 
*::after {
  box-sizing: inherit;
}
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
    font-size: 62.5%;
    font-size: 1.4rem; /* 1.4rem = 14px */
    line-height: 1.4;
    font-weight: 400;
    font-family: "Montserrat", Helvetica, Arial, sans-serif;
    color: #F7F9FC; 
    scroll-behavior: smooth;
}
body {
    background-color: #34393d !important;
    margin: 0 auto !important;
}

/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
    width: 100%;
    box-sizing: border-box; }
.u-max-full-width {
    max-width: 100%;
    box-sizing: border-box; }
.u-pull-right {
    float: right; }
.u-pull-left {
    float: left; }
.u-center {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important; }
.u-hidden {
    display: none; }

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-weight: 600; }
h1 { font-size: 3.8rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.4rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 2.9rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.3rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.7rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.4rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phone or tablet */
@media (min-width: 550px) {
    h1 { font-size: 4.0rem; }
    h2 { font-size: 3.6rem; }
    h3 { font-size: 3.0rem; }
    h4 { font-size: 2.4rem; }
    h5 { font-size: 1.8rem; }
    h6 { font-size: 1.5rem; }
}

p {
    margin-top: 0; 
    font-size: 1.4rem;
}


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
    font-size: 1.4rem;
    color: #F7F9FC;
    text-decoration: none;
    overflow: auto;
    display: block;
}


/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.iconButton{
    min-width: 0;
    width: 1rem !important;
    height: 1rem !important;
    font-size: 1rem !important;
    padding: 0.25rem 0.25rem;
    text-align: center;
    vertical-align: middle;
    color: #F7F9FC;
    background-color: transparent;
    border: none;
    margin: 0;
}
.iconButton :hover{
    color: #415d88;
    background-color: transparent;
    border: none;
}
.iconButton.backToTopBtn{
    position: fixed;
    bottom: 6px;
    right: 10px;
    width: 1.25rem !important;
    height: 1.25rem !important;
    aspect-ratio: 1;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #464646;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.iconButton.backToTopBtn.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* Menu
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.menu-container {
    position: fixed;
    top: 24px;
    right: 16px;
    width: 24px;
    height: 24px;
    z-index: 20;
}
.menu-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
    z-index: 21;
}
.menu-checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}
/* Full-screen menu */
.menu {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background-color: #2A2F33;
    padding: 4rem 1rem;
    z-index: 10;
    text-align: center;
    transform: translateX(100%);
    visibility: hidden;
    transition:
        transform 0.3s ease-in-out,
        visibility 0.3s ease-in-out;
}
.menu img {
    margin: 0 auto;
    width: 84px;
    height: 84px;
}
/* Checked*/
.menu-checkbox:checked ~ .menu-button {
    transform: rotate(45deg);
}
.menu-checkbox:checked ~ .menu {
    transform: translateX(0);
    visibility: visible;
}




/* Game Card
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.game-card-container {
    width: 100%;
    height: 100vh;  /* Fallback */
    height: 100dvh; /* Adapts to the dynamic mobile viewport */
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-snap-type: y mandatory;
    scroll-padding-top: 0.1rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.game-card-container::-webkit-scrollbar {
    display: none;
}

/* Each card fits inside the viewport, leaving room for spacing */
.game-card {
    flex: 0 0 calc(100% - 0.0rem);
    min-height: 0;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    scroll-snap-align: start;
    opacity: 1;
    transition: opacity 0.10s ease-in-out;
}

/* Header */
.game-card-header {
    flex: 0 0 60px;
    width: 100%;
    padding: 16px 8px;
    background-color: #2A2F33;
}
.game-card-header img {
    width: 1.2rem;
    height: 1.2rem;
}
.game-card-header a {
    position: relative;
    font-size:0.65rem; 
    max-width: 128px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    padding:4px 0.8rem 0 4px;
}
.game-card-header a span {
    position: absolute;
    top: 0;
    right: 0.1rem;
    font-size:0.5rem; 
}

/* Game preview */
.game-card-content {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}
.game-card-content img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fills the container, preserves ratio, crops excess */
}

/* Footer */
.game-card-footer {
    flex: 0 0 78px;
    width: 100%;
    padding: 4px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    background-color: #2A2F33;
}
.game-card-footer .item {
    width: 100%; 
    height: 100%; 
    text-align: center;
}
.game-card-footer .item .iconButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    padding: 8px; 
    cursor: pointer;
    font-size: 0.8rem; 
}
.game-card-footer .item p {
    width: 100%;
    margin: 2px 0 0 0;
    font-size: 0.6rem; 
}


/* Game Overlay
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.game-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #34393d;
    opacity: 0;
    display: none;
    transition: opacity 0.60s ease-in-out;
    z-index: 80;
}
.game-overlay .iconButton{
    position: absolute;
    top: 8px;
    right: 16px;
    color: #34393d;
    opacity: 0.6;
}
.game-overlay iframe{
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/

/* Larger than Desktop HD */
@media (max-width: 1200px) {}

/* Larger than mobile */
@media (min-width: 400px) {
    .game-card-container {
        width: 100%;
        max-width: 420px;
        margin-inline: auto;
    }
    .menu-container {
        top: 24px;
        left: calc(50% + 210px - 40px);
        right: auto;
        transform: none;
    }
    .menu {
        width: 100%;
        max-width: 420px;
        left: 50%;
        right: auto;
        transform: translateX(calc(100% + 50vw));
    }
    .menu-checkbox:checked ~ .menu {
        transform: translateX(-50%);
    }
    .iconButton.backToTopBtn{
        left: calc(50% + 210px - 40px);
    }
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}