/* Font faces with font-display: block to prevent FOUT */
@font-face {
    font-family: 'SpecialGothic';
    src: url('../assets/fonts/SpecialGothicExpandedOne-Regular.ttf') format('truetype');
    font-display: block;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../assets/fonts/Montserrat-Light.ttf') format('truetype');
    font-display: block;
}

/* Loading Screen */
#loading-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.4s ease;
}
#loading-screen img {
    opacity: 0.18;
}
body.loaded #loading-screen {
    opacity: 0;
    pointer-events: none;
}

/* General Reset */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    overflow: hidden;
}

/* Canvas Styling */
#gameCanvas {
    background-color: #ffffff;
    display: none;  /* Initially hidden, shown when game starts */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
.top-right-nav {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 20px;
    z-index: 10;
    align-items: flex-end;
    visibility: hidden;
}
body.loaded .top-right-nav {
    visibility: visible;
}
.top-right-nav a {
    color: #222;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 1px;
    transition: color 0.2s;
    opacity: 0;
}
body.loaded .top-right-nav a {
    animation: navLinkIn 0.5s cubic-bezier(0.6,0.2,0.2,1) forwards;
}
.top-right-nav a:hover {
    color: #888;
}
.top-right-nav a:focus-visible {
    outline: 2px solid #222;
    outline-offset: 2px;
}

/* Entry Animations */
@keyframes navLinkIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

body.loaded .top-right-nav a { animation-delay: 2.9s; }
  
#mobile-platforms {
    display: none;
    position: absolute;
    top: unset;
    left: 20px;
    width: 100%;
    z-index: 10;
    background: none;
    padding: 32px 0 0 0;
    font-family: Montserrat, sans-serif;
    text-align: center;
    bottom: 20px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.4,0.2,0.2,1);
}

/* Mobile platform cards */
.mobile-platform {
    text-decoration: none;
    color: inherit;
    margin: 0 0 8px 0;
    max-width: 320px;
    padding: 0;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    font-family: Montserrat, SpecialGothic, sans-serif;
    width: 100%;
    cursor: pointer;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.4,0.2,0.2,1), transform 0.5s cubic-bezier(0.4,0.2,0.2,1);
}
.mobile-platform:focus-visible {
    outline: 2px solid #222;
    outline-offset: 2px;
}
.mobile-platform.visible {
    opacity: 1;
    transform: translateY(0);
}
.mobile-platform-year {
    font-size: 15px;
    font-weight: 400;
    color: #888;
    margin-right: 4px;
}
.mobile-platform-text {
    font-family: SpecialGothic, Montserrat, sans-serif;
    font-size: 20px;
}

@media (max-width: 768px) {
  .top-right-nav {
    font-size: 16px;
  }
}