* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a:hover circle {
    cursor: pointer;
}

/* Archive box hover effect */
.box:hover ~ #boxlid {
    transform: translateY(-10px);
}

.box {
    cursor: pointer;
}

#boxlid {
    transition: transform 0.3s ease-in-out;
}

body, .container {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
}

.container {
    width: 100%;
    height: 100vh;
    display: flexbox;
    grid-column: 3;
    grid-row: auto;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.arcade {
    border: 2px black;
    width: 33%;
    height: auto;
    max-width: 100%;
    max-height: 90vh;
    display: inline-block;
    margin: 0 auto;
    stroke: black;
    stroke-width: 2;
}

.arcade-hint {
    font-family: 'Press Start 2P', 'Courier New', monospace;
    font-size: 0.75rem;
    color: #333;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    animation: fadeInOut 2s ease-in-out infinite;
}

.archive {
    border: 2px black;
    width: 33%;
    height: auto;
    max-width: 100%;
    max-height: 90vh;
    display: inline-block;
    margin: 0 auto;
    stroke: black;
    stroke-width: 2;
}

.hanger {
    border: 2px black;
    width: 33%;
    height: auto;
    max-width: 100%;
    max-height: 90vh;
    display: inline-block;
    margin: 0 auto;
    stroke: black;
    stroke-width: 2;
    transform:translateY(calc(calc(100%/4)*1.13));
}

.relajao {
    cursor: pointer;
    transition: transform 0.3s ease-out;
}

.relajao:hover {
    transform: translateX(70px);
}

.projectiles {
    cursor: pointer;
    transition: transform 0.3s ease-out;
}

.projectiles:hover {
    transform: translateX(-60px);
}

.instruction-text {
    font-family: 'Press Start 2P', 'Courier New', monospace;
    font-size: 0.9rem;
    color: #333;
    text-align: center;
    margin-top: 2rem;
    animation: fadeInOut 2s ease-in-out infinite;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

@keyframes fadeInOut {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
}

/* Page transition effects */
.page-transition-out {
    animation: fadeOut 0.5s ease-in-out forwards;
}

.page-transition-in {
    animation: fadeIn 0.5s ease-in-out forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(1.05);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Improve tap/click behavior on arcade power cord */
.arcade { -webkit-tap-highlight-color: transparent; }
.arcade text {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.arcade path {
    pointer-events: stroke;
}

/* Mobile layout: stack vertically with arcade on top */
@media (max-width: 768px), (orientation: portrait) {
    body, .container {
        align-items: flex-start;
    }
    .container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 6vh;
        padding-top: 3vh;
        height: auto;
        min-height: 100vh;
    }
    .arcade, .hanger, .archive {
        width: 100% !important;
        max-width: 100% !important;
        height: auto;
        max-height: none;
        display: block;
        margin: 0 auto;
    }
    /* Order: arcade first, then hanger, then archive */
    .arcade { order: 1; }
    .hanger { order: 2; }
    .archive { order: 3; }

    /* Vertical spacing */
    .arcade { 
        margin-top: 20px;
        pointer-events: none;
    }
    
    /* Re-enable pointer events for clickable elements within arcade */
    .arcade a {
        pointer-events: auto;
    }
    .hanger {
        transform:translateY(150px);
        margin-top: -60%; 
    }
    .archive {
        transform:translateY(120px);
        transform: translateX(calc((100%/100)*3));
        margin-top: -100%;
        pointer-events: none;
    }
    
    /* Re-enable pointer events for clickable elements within archive */
    .archive a {
        pointer-events: auto;
    }

    /* Tweak hint text for readability on mobile */
    .arcade-hint {
        transform: translateX(calc((100%/100)*4));
        /*margin: 0 auto;*/
        align-self: center;
        text-align: center;
        font-size: 0.75rem;
    }

    .relajao {
        transform: translateX(20px);
    }

    .projectiles {
        transform: translateX(-20px);
    }
}