/* ========================================= */
/* BASE STYLES & TYPOGRAPHY                  */
/* ========================================= */
body { background-color: #111827; color: white; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 20px; display: flex; justify-content: center; }
.container { max-width: 900px; width: 100%; text-align: center; }
h1 { color: #ffffff; margin-bottom: 5px; }
.subtitle { color: #e2e8f0; margin-bottom: 40px; }

.back-link { color: #818cf8; text-decoration: none; display: inline-block; margin-bottom: 20px; font-size: 16px; }
.back-link:hover { text-decoration: underline; }

/* ========================================= */
/* MAIN ARENA GRID (Restored!)               */
/* ========================================= */
.game-grid { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 20px; }
.game-card { background-color: #1e293b; border: 2px solid #334155; border-radius: 12px; width: 220px; padding: 30px 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-decoration: none; color: white; transition: transform 0.2s, box-shadow 0.2s; }
.game-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.6); border-color: #60a5fa; }
.game-card h2 { margin: 0 0 20px 0; font-size: 26px; color: #ffffff; }
.game-card p { font-size: 14px; margin: 5px 0; color: #94a3b8; }
.status-dot { display: inline-block; width: 10px; height: 10px; background-color: #34d399; border-radius: 50%; margin-right: 5px; }
.status-dot.yellow { background-color: #fbbf24; }
.uno-card-portal { border-color: #fbbf24; opacity: 0.9; cursor: pointer; }
.uno-card-portal h2 { color: #fbbf24; }
.warning-text { color: #ef4444 !important; font-size: 12px !important; margin-top: 10px !important; }

/* ========================================= */
/* CONTROLS & BUTTONS                        */
/* ========================================= */
button { background-color: #ef4444; color: white; border: none; padding: 12px 24px; font-size: 16px; font-weight: bold; border-radius: 8px; cursor: pointer; transition: background 0.2s; }
button:hover { background-color: #dc2626; }
.controls { display: flex; justify-content: center; gap: 15px; align-items: center; margin-bottom: 20px; }
select { padding: 10px; border-radius: 8px; background: #1e293b; color: white; border: 1px solid #475569; font-size: 16px; cursor: pointer; }

/* ========================================= */
/* TIC-TAC-TOE                               */
/* ========================================= */
.board { margin: 30px auto; display: grid; justify-content: center; }
.ttt-board { grid-template-columns: repeat(3, 100px); gap: 5px; background-color: #334155; padding: 5px; border-radius: 10px; width: max-content; }
.ttt-cell { width: 100px; height: 100px; background-color: #1e293b; font-size: 60px; font-weight: bold; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s; }
.ttt-cell:hover { background-color: #0f172a; }
.ttt-cell.x { color: #ef4444; }
.ttt-cell.o { color: #3b82f6; }

/* ========================================= */
/* CONNECT 4                                 */
/* ========================================= */
.c4-board { grid-template-columns: repeat(7, 60px); gap: 8px; background-color: #1d4ed8; padding: 15px; border-radius: 12px; width: max-content; }
.c4-board .cell { width: 60px; height: 60px; background-color: #0f172a; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.c4-board .cell.red { background-color: #ef4444; }
.c4-board .cell.yellow { background-color: #fbbf24; }

/* ========================================= */
/* UNO                                       */
/* ========================================= */
.uno-card { width: 80px; height: 120px; border-radius: 8px; border: 3px solid white; display: flex; justify-content: center; align-items: center; font-family: sans-serif; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.6); box-shadow: 2px 4px 8px rgba(0,0,0,0.4); cursor: pointer; user-select: none; transition: transform 0.2s; }
.uno-card:hover { transform: translateY(-10px); }
.uno-card.red { background-color: #ef4444; }
.uno-card.blue { background-color: #3b82f6; }
.uno-card.green { background-color: #22c55e; }
.uno-card.yellow { background-color: #eab308; }
.uno-card.black { background: conic-gradient(from 45deg, #ef4444 0deg 90deg, #3b82f6 90deg 180deg, #eab308 180deg 270deg, #22c55e 270deg 360deg); text-shadow: 2px 2px 5px black, -1px -1px 2px black; }
.uno-card.facedown { background-color: #1e293b; border-color: #ffffff; color: #ffffff; font-style: italic; font-size: 24px !important; cursor: default; }
.uno-card.facedown:hover { transform: none; }
#draw-pile-container .uno-card.facedown:hover { transform: translateY(-5px); box-shadow: 0 0 20px rgba(255,255,255,0.4) !important; cursor: pointer; }

@keyframes deal-card-animation { 0% { transform: translateY(-50px) scale(0.8); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes play-card-animation { 0% { transform: scale(1.3); opacity: 0.5; } 100% { transform: scale(1); opacity: 1; } }
.animate-deal { animation: deal-card-animation 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.animate-play { animation: play-card-animation 0.3s ease-out forwards; }

footer { margin-top: 50px; font-size: 14px; color: #94a3b8; }
footer a { color: #818cf8; text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* ========================================= */
/* MOBILE RESPONSIVENESS                     */
/* ========================================= */
@media (max-width: 600px) {
    .game-card { width: 90%; height: auto; padding: 20px; }
    .ttt-board { grid-template-columns: repeat(3, 80px); }
    .ttt-cell { width: 80px; height: 80px; font-size: 40px; }
    .c4-board { grid-template-columns: repeat(7, 40px); gap: 5px; padding: 10px; }
    .c4-board .cell { width: 40px; height: 40px; }
    .uno-card { width: 50px !important; height: 75px !important; border-width: 2px !important; font-size: 20px !important; }
    .uno-card.black { font-size: 12px !important; }
    #table-center { gap: 20px !important; margin: 20px 0 !important; }
    #player-hand-container { gap: 5px !important; }
    .controls { flex-direction: column !important; gap: 10px !important; }
    #chess-board { width: 100% !important; max-width: 400px; }
}