body{font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:#fff;margin:0;padding:0}
main.games-container{max-width:1100px;margin:28px auto;padding:18px;background:transparent;border-radius:6px}
h1{margin-top:0;color:var(--accent)}
p.hint{color:var(--muted)}
div.layout{display:flex;gap:18px}
section.games-list{flex:1;min-width:220px}
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.alpha-tabs{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:hidden;margin-bottom:12px;padding-bottom:6px}
.pager-tabs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center}
.alpha-tab{flex:1 1 0;min-width:0;display:inline-flex;justify-content:center;align-items:center;padding:8px 10px;border-radius:8px;background:transparent;color:var(--muted);text-decoration:none;border:1px solid transparent;font-weight:700;font-size:13px;transition:all .12s ease;text-align:center}
.pager-tabs .alpha-tab{flex:0 0 auto;padding:6px 10px;border-radius:6px}
.alpha-tab:hover{background:rgba(255,255,255,0.02);color:#fff;border-color:rgba(255,255,255,0.04);transform:translateY(-2px)}
.alpha-tab.active{background:var(--accent);color:#fff;border-color:rgba(255,42,42,0.12);box-shadow:0 6px 18px rgba(0,0,0,0.12)}
.game-tile{background:var(--card);border:1px solid #1e2330;border-radius:12px;padding:8px;display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}

.game-tile:hover{transform:translateY(-6px);box-shadow:0 10px 30px rgba(0,0,0,0.5)}
.game-thumb{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;background:#000;transition:box-shadow .18s ease,transform .12s ease;position:relative;z-index:1}

/* Red glow around thumbnail when hovering the tile */
.game-tile:hover .game-thumb{box-shadow:0 0 8px rgba(255,42,42,0.32), 0 6px 12px rgba(0,0,0,0.28);border:2px solid #ff2a2a;border-radius:6px}
.game-title{margin-top:8px;font-weight:600;color:#fff;text-align:center;padding:0 8px}
#playerWrapper{background:#000;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;overflow:hidden;max-width:854px;width:100%}
#playerWrapper .error{padding:12px;color:#fff}
#playerPlaceholder{color:#cfcfcf}
#playerWrapper object, #playerWrapper embed, #playerWrapper #swfObject, #playerWrapper #swfEmbed {
	width:854px !important;
	height:480px !important;
	max-width:100% !important;
	box-sizing:border-box;
}
div.player-controls{display:flex;gap:8px;margin-top:6px}
div.player-controls button{padding:8px 12px;border-radius:4px;border:1px solid #ccc;background:#fff;cursor:pointer}

/* Pagination styles */
.pagination{display:flex;gap:8px;align-items:center}
.pagination .page-link{padding:6px 10px;border-radius:6px;background:rgba(255,255,255,0.03);color:var(--muted);text-decoration:none;border:1px solid transparent}
.pagination .page-link:hover{background:rgba(255,255,255,0.04);color:#fff;border-color:rgba(255,255,255,0.04)}
.pagination .page.current{padding:6px 10px;border-radius:6px;background:var(--accent);color:#fff;font-weight:700}
.pagination .ellipsis{padding:6px 8px;color:var(--muted)}