/* ─── Base & Resets ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: #000; color: #ccc; font-family: 'Inter', sans-serif; line-height: 1.6; }
a { color: #66c2ff; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

/* ─── Buttons & Inputs ───────────────────────────────────────────────────── */
button, .btn, a.btn { display: inline-block; background: linear-gradient(145deg, #004080, #002040); color: #fff; border: none; border-radius: 6px; padding: 0.75rem 1.5rem; font-weight: 600; cursor: pointer; transition: background 0.3s, transform 0.2s, box-shadow 0.2s; }
button:hover, .btn:hover, a.btn:hover { background: linear-gradient(145deg, #0066cc, #004080); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,102,204,0.6); }
button:focus, .btn:focus, a.btn:focus { outline: 3px solid #66c2ff; outline-offset: 2px; }
input, select, textarea { width: 100%; padding: 0.75rem; margin: 0.5rem 0 1rem; background: #111; border: 1px solid #222; border-radius: 6px; color: #ccc; transition: border-color 0.3s, box-shadow 0.3s; }
input::placeholder, textarea::placeholder { color: #555; }
input:focus, select:focus, textarea:focus { border-color: #66c2ff; box-shadow: 0 0 10px rgba(102,194,255,0.7); outline: none; }

/* ─── Layout ─────────────────────────────────────────────────────────────── */
main { max-width: 1080px; margin: 2rem auto; padding: 0 1rem; }
.card, section { background: #111; border: 1px solid #222; border-radius: 8px; padding: 1.5rem; margin-bottom: 2rem; box-shadow: 0 6px 20px rgba(0,0,0,0.8); transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; }
.card:hover, section:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,102,204,0.4); border-color: #66c2ff; }

/* ─── Header & Nav ───────────────────────────────────────────────────────── */
.site-header { background: #111; box-shadow: 0 4px 16px rgba(0,0,0,0.8); position: sticky; top: 0; z-index: 1000; }
.nav-container { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; padding: 1rem; }
.brand { font-size: 1.8rem; font-weight: 700; color: #66c2ff; }
.main-nav .nav-list { margin-left: auto; display: flex; gap: 1.5rem; }
.nav-link { position: relative; padding: 0.5rem 1rem; border-radius: 6px; font-weight: 500; color: #ccc; transition: background 0.3s, color 0.3s; }
.nav-link::after { content: ''; position: absolute; left: 10%; bottom: 4px; width: 0; height: 2px; background: #66c2ff; transition: width 0.3s; }
.nav-link:hover, .nav-link.active { background: #66c2ff; color: #000; }
.nav-link:hover::after, .nav-link.active::after { width: 80%; }

/* ─── Page Header ───────────────────────────────────────────────────────── */
.page-header { text-align: center; padding: 2rem 1rem; background: linear-gradient(135deg, #001027, #00081a); border-radius: 10px; box-shadow: inset 0 0 10px rgba(0,0,0,0.7), 0 4px 12px rgba(0,0,0,0.5); }
.page-header h2 { margin: 0; font-size: 2.8rem; color: #66c2ff; text-shadow: 0 0 8px rgba(102,194,255,0.6); }
.page-header .sub { margin-top: 0.5rem; font-size: 1.1rem; color: #aaa; }

/* ─── Summary Grid ───────────────────────────────────────────────────────── */
.summary-grid { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.summary-card { flex: 1 1 200px; display: flex; align-items: center; padding: 1rem; background: #121212; border: 1px solid #222; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.7); transition: transform 0.3s, box-shadow 0.3s; }
.summary-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,102,204,0.5); }
.icon-circle { width: 50px; height: 50px; border-radius: 50%; background: #002040; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #66c2ff; margin-right: 1rem; }
.summary-info h3 { margin: 0; font-size: 1.5rem; }
.summary-info p { margin: 0; color: #aaa; }

/* ─── Action Grid ────────────────────────────────────────────────────────── */
.action-grid { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.action-card { flex: 1 1 150px; background: #121212; border: 1px solid #222; border-radius: 8px; padding: 1rem; text-align: center; box-shadow: 0 4px 16px rgba(0,0,0,0.7); transition: transform 0.3s, box-shadow 0.3s; position: relative; }
.action-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,102,204,0.5); }
.action-card .icon-circle.accent { background: #004080; }
.action-card span { display: block; margin-top: 0.5rem; font-weight: 600; color: #fff; }
.action-card[data-tooltip]:hover::after { content: attr(data-tooltip); position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%); background: #222; color: #fff; padding: 0.5rem; border-radius: 4px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.8); font-size: 0.85rem; }

/* ─── Gamble Game Grid ─────────────────────────────────────────────────── */
.card-grid, .card-grid a { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.5rem; }
.card-grid { margin: 2rem auto; padding: 0 1rem; }
.game-card { background: #111; border: 1px solid #222; border-radius: 8px; text-align: center; padding: 1.5rem; box-shadow: 0 6px 20px rgba(0,0,0,0.8); transition: transform 0.3s, box-shadow 0.3s; text-decoration: none; color: #ccc; }
.game-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,102,204,0.4); border-color: #66c2ff; }
.game-card .game-icon { font-size: 3rem; margin-bottom: 0.5rem; }
.game-card h2 { font-size: 1.25rem; margin: 0.5rem 0; color: #66c2ff; }
.game-card .btn-sm { background: #66c2ff; color: #000; padding: 0.5rem 1rem; font-size: 0.9rem; border-radius: 6px; }
.game-card .btn-sm:hover { background: #004080; color: #fff; }

/* ─── History Section ────────────────────────────────────────────────────── */
.history-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.search-input { max-width: 300px; }
.no-data { text-align: center; color: #777; padding: 2rem 0; }

/* ─── Table Styling ───────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
th, td { padding: 0.75rem; border: 1px solid #222; }
th { background: #111; color: #66c2ff; position: sticky; top: 0; }
tbody tr:nth-child(odd) { background: #111; }
tbody tr:nth-child(even) { background: #000; }
tbody tr:hover { background: #222; }

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.site-footer { background: #111; color: #8a8ab4; padding: 2rem 1rem; border-top: 1px solid #222; }
.footer-container { max-width: 1080px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
.footer-brand { font-size: 1.3rem; font-weight: 700; color: #66c2ff; }
.footer-nav, .social-links { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.footer-nav a, .social-links a { font-weight: 500; color: #ccc; }
.footer-nav a:hover, .social-links a:hover { color: #66c2ff; }

/* ─── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 800px) { .summary-grid, .action-grid { flex-direction: column; } }
@media (max-width: 600px) { .game-card, .action-card, .summary-card { width: 100%; } }