* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}
body { 
    font-family: 'Space Mono', monospace; 
    background: #141414; 
    color: #d4d0c8; 
    min-height: 100vh; 
}

#nav {
      position: fixed; 
      top: 0; 
      left: 0; 
      right: 0; 
      height: 52px;
      background: #1a1a1a; 
      border-bottom: 1px solid #2a2a2a;
      display: flex; 
      align-items: center; 
      padding: 0 24px; 
      gap: 16px; 
      z-index: 100;
}

#nav-logo { 
    font-size: 13px; 
    font-weight: 700; 
    letter-spacing: 0.2em; 
    text-transform: uppercase; 
    color: #d4d0c8; 
    cursor: pointer; 
    user-select: none; 
}

#nav-logo span { 
    color: #c8a84a; 
}

#nav-back { 
    display: none; 
    align-items: center; 
    gap: 8px; 
    font-size: 11px; 
    letter-spacing: 0.14em; 
    text-transform: uppercase; 
    color: #888; 
    cursor: pointer; 
    transition: color 0.15s; 
    background: none; 
    border: none; 
    font-family: 'Space Mono', monospace; 
}

#nav-back:hover { 
    color: #d4d0c8; 
}

#nav-back.visible { 
    display: flex; 
}

#nav-game-title { 
    font-size: 11px; 
    letter-spacing: 0.18em; 
    text-transform: uppercase; 
    color: #555; 
    margin-left: 4px; 
}

#menu { 
    padding: 80px 24px 48px; 
    max-width: 960px; 
    margin: 0 auto; 
}

#menu-header { 
    text-align: center; 
    margin-bottom: 48px; 
}

#menu-header h1 { 
    font-size: 28px; 
    font-weight: 700; 
    letter-spacing: 0.08em; 
    color: #d4d0c8; 
}

#menu-header p { 
    font-size: 12px;
    color: #555; 
    letter-spacing: 0.14em; 
    text-transform: uppercase; 
    margin-top: 8px; 
}

#game-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); 
    gap: 14px; 
}

.game-card {
    background: #1e1e1e; 
    border: 1px solid #2a2a2a; 
    border-radius: 12px;
    padding: 26px 18px 22px; 
    cursor: pointer;
    transition: border-color 0.18s, transform 0.15s, background 0.18s;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 12px;
    position: relative; 
    overflow: hidden;
}

.game-card::before { 
    content:''; 
    position:absolute; 
    inset:0; 
    opacity:0; 
    transition:opacity 0.2s; 
    border-radius:12px; 
}

.game-card[data-game="ttt"]::before    { 
    background: radial-gradient(ellipse at top, rgba(226,75,74,0.09),    transparent 70%); 
}

.game-card[data-game="memory"]::before { 
    background: radial-gradient(ellipse at top, rgba(55,138,221,0.09),   transparent 70%); 
}

.game-card[data-game="snake"]::before  {
     background: radial-gradient(ellipse at top, rgba(79,201,122,0.09),   transparent 70%); 
}

.game-card[data-game="2048"]::before   { 
    background: radial-gradient(ellipse at top, rgba(200,168,74,0.09),   transparent 70%); 
}

.game-card[data-game="tetris"]::before { 
    background: radial-gradient(ellipse at top, rgba(0,200,200,0.09),    transparent 70%); 
}

.game-card[data-game="pong"]::before   { 
    background: radial-gradient(ellipse at top, rgba(79,201,122,0.07),   transparent 70%); 
}

.game-card[data-game="sudoku"]::before { 
    background: radial-gradient(ellipse at top, rgba(180,130,255,0.09),  transparent 70%); 
}

.game-card:hover { 
    border-color: #444; transform: translateY(-3px); background: #222; 
}

.game-card:hover::before { 
    opacity: 1; 
}

.game-card:active { 
    transform: translateY(-1px); 
}

.game-icon { 
    font-size: 44px; 
    line-height: 1; 
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4)); 
}

.game-name { 
    font-size: 13px; 
    font-weight: 700; 
    letter-spacing: 0.1em; 
    text-transform: uppercase; 
    color: #d4d0c8; 
}

.game-desc { 
    font-size: 10px; 
    color: #555; 
    letter-spacing: 0.1em; 
    text-align: center; 
    line-height: 1.7; 
    text-transform: uppercase; 
}

.game-badge { 
    font-size: 9px; 
    letter-spacing: 0.12em; 
    text-transform: uppercase; 
    padding: 3px 10px; 
    border-radius: 20px; 
    font-weight: 700; 
}

.badge-red    { 
    background: #3a1515; 
    color: #e24b4a; 
    border: 1px solid #5a2020; 
}

.badge-blue   { 
    background: #152030; 
    color: #378add; 
    border: 1px solid #1a3a55; 
}

.badge-green  { 
    background: #152515; 
    color: #4fc97a; 
    border: 1px solid #1e4020; 
}

.badge-gold   { 
    background: #2a2010; 
    color: #c8a84a; 
    border: 1px solid #4a3818; 
}

.badge-cyan   { 
    background: #102828; 
    color: #00c8c8; 
    border: 1px solid #1a4a4a; 
}

.badge-purple { 
    background: #221530; 
    color: #b882ff; 
    border: 1px solid #3a2055; 
}

#game-view { 
    display: none; 
    padding-top: 52px; 
}

#game-view.visible { 
    display: block; 
}

#game-frame { 
    width: 100%; 
    min-height: calc(100vh - 52px); 
    border: none; 
    background: #141414; 
}

#menu-footer { 
    text-align: center; 
    padding: 24px 24px 48px; 
    font-size: 10px; 
    color: #2e2e2e; 
    letter-spacing: 0.12em; 
    text-transform: uppercase; 
}

.section-label { 
    font-size: 10px; 
    letter-spacing: 0.22em; 
    text-transform: uppercase; 
    color: #444; 
    margin-bottom: 12px;
    padding-left: 2px; 
}

.section { 
    margin-bottom: 32px; 
}