* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); color: #eee; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 20px; }
header { text-align: center; margin-bottom: 30px; }
header h1 { font-size: 2.5rem; }
header p { color: #aaa; margin-top: 8px; }
#menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; max-width: 700px; width: 100%; }
.game-btn { padding: 24px 16px; font-size: 1.1rem; border: 2px solid #555; border-radius: 12px; background: rgba(255,255,255,0.08); color: #eee; cursor: pointer; transition: all 0.2s; }
.game-btn:hover { background: rgba(255,255,255,0.18); border-color: #f6821f; transform: translateY(-3px); }
#game-area { max-width: 600px; width: 100%; display: flex; flex-direction: column; align-items: center; }
#back-btn { margin-top: 24px; padding: 12px 28px; font-size: 1rem; border: 2px solid #f6821f; border-radius: 8px; background: transparent; color: #f6821f; cursor: pointer; }
#back-btn:hover { background: #f6821f; color: #fff; }
#ttt-board { display: grid; grid-template-columns: repeat(3, 100px); gap: 6px; margin: 20px 0; }
.ttt-cell { width: 100px; height: 100px; font-size: 2.5rem; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.1); border: 2px solid #555; border-radius: 8px; cursor: pointer; }
.ttt-cell:hover { background: rgba(255,255,255,0.2); }
#mem-board { display: grid; grid-template-columns: repeat(4, 80px); gap: 8px; margin: 20px 0; }
.mem-card { width: 80px; height: 80px; font-size: 2rem; display: flex; align-items: center; justify-content: center; background: #f6821f; border-radius: 8px; cursor: pointer; transition: transform 0.3s; }
.mem-card.flipped { background: rgba(255,255,255,0.15); }
.mem-card.matched { background: #2ecc71; cursor: default; }
#snake-canvas { border: 2px solid #555; border-radius: 8px; background: #111; }
#grid-2048 { display: grid; grid-template-columns: repeat(4, 80px); gap: 6px; background: rgba(255,255,255,0.05); padding: 8px; border-radius: 8px; margin: 16px 0; }
.cell-2048 { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; background: rgba(255,255,255,0.08); border-radius: 6px; }
#pong-canvas { border: 2px solid #555; border-radius: 8px; background: #111; }
#reaction-box { width: 300px; height: 200px; display: flex; align-items: center; justify-content: center; border-radius: 12px; cursor: pointer; font-size: 1.3rem; text-align: center; margin: 20px 0; }
.game-title { font-size: 1.8rem; margin-bottom: 10px; }
.game-info { color: #aaa; margin: 8px 0; }
#arrow3d-canvas { border: 2px solid #f6821f; border-radius: 8px; background: #111; cursor: pointer; max-width: 100%; }