@font-face { font-family: 'BlurLight'; src: url(../fonts/blurlight.ttf); }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { background: #0d0d0d; color: #c0c0c0; font-family: 'BlurLight', monospace; }
body { padding: env(safe-area-inset-top) 28px env(safe-area-inset-bottom); overflow-y: auto; }

.page {
    max-width: 400px;
    margin: 0 auto;
    padding: 48px 0 64px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.top { animation: fadeUp 0.4s ease both; }

.back {
    font-size: 12px;
    color: #c0c0c0;
    text-decoration: none;
    opacity: 0.3;
    letter-spacing: 2px;
    transition: opacity 0.2s;
}
.back:hover { opacity: 0.8; }

.header { animation: fadeUp 0.5s ease 0.05s both; }
.title { font-size: 13px; opacity: 0.35; letter-spacing: 3px; }

.games-total {
    font-size: 11px;
    opacity: 0.2;
    letter-spacing: 2px;
    animation: fadeUp 0.5s ease 0.08s both;
}

.games-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: fadeUp 0.5s ease 0.1s both;
}

.game-card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 6px 12px;
    padding: 20px;
    border: 1px solid rgba(200,200,200,0.1);
    text-decoration: none;
    color: #c0c0c0;
    transition: border-color 0.2s, background 0.2s;
}

.game-card:hover {
    border-color: rgba(200,200,200,0.3);
    background: rgba(200,200,200,0.03);
}

.game-name {
    font-size: 22px;
    letter-spacing: 2px;
    opacity: 0.9;
}

.game-arrow {
    grid-row: 1;
    grid-column: 2;
    font-size: 18px;
    opacity: 0.25;
    align-self: center;
    transition: opacity 0.2s, transform 0.2s;
}

.game-card:hover .game-arrow { opacity: 0.7; transform: translateX(3px); }

.game-desc {
    grid-column: 1 / -1;
    font-size: 13px;
    opacity: 0.35;
    letter-spacing: 1px;
}

.game-top {
    grid-column: 1 / -1;
    font-size: 12px;
    opacity: 0.4;
    letter-spacing: 1.5px;
}