/* --- hub.css --- */
:root {
    --bg: #fdfdfd;
    --black: #000000;
    --white: #ffffff;
    --gray: #f4f4f4;
}

* { box-sizing: border-box; cursor: crosshair; }
body { background: var(--bg); font-family: 'Courier New', monospace; margin: 0; }

nav { 
    position: fixed; top: 30px; left: 50%; transform: translateX(-50%); 
    font-weight: 900; border: 4px solid var(--black); padding: 12px 30px; 
    background: var(--white); z-index: 1000; box-shadow: 8px 8px 0px var(--black); 
}

.grid-container { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); /* This creates the 4-tile row */
    width: 100%; 
    max-width: 1100px; 
    margin: 160px auto 40px; 
    border-top: 2px solid var(--black); 
    border-left: 2px solid var(--black);
}

.tile {
    aspect-ratio: 1 / 1;
    display: flex; flex-direction: column; 
    align-items: center; justify-content: center;
    border-right: 2px solid var(--black); border-bottom: 2px solid var(--black);
    background: var(--white); text-decoration: none; color: var(--black);
    position: relative; padding: 20px;
}

.tile-title { font-weight: 900; font-size: 0.85rem; margin-top: 15px; text-transform: uppercase; }
.tile-subtitle { font-size: 0.65rem; opacity: 0.6; text-align: center; margin-top: 5px; }

.locked-tile { 
    background: repeating-linear-gradient(45deg, #fff, #fff 10px, #f9f9f9 10px, #f9f9f9 20px); 
    opacity: 0.7; 
}

.hex-code { 
    position: absolute; bottom: 12px; width: 100%; text-align: center; 
    font-size: 0.55rem; opacity: 0.4; pointer-events: none;
}

.home-btn {
    position: fixed; top: 35px; left: 30px; z-index: 1100;
    padding: 8px 15px; background: var(--white); border: 3px solid var(--black);
    color: var(--black); text-decoration: none; font-weight: 900;
    box-shadow: 4px 4px 0px var(--black); font-size: 0.7rem;
}

@keyframes shiver {
    0% { transform: translate(0,0); }
    25% { transform: translate(1px, -1px); }
    75% { transform: translate(-1px, 1px); }
}

.tile:hover:not(.locked-tile) { background: var(--gray); animation: shiver 0.1s infinite; }

/* Mobile Safeguards */
@media (max-width: 1024px) { .grid-container { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .grid-container { grid-template-columns: 1fr; } }