/*
  Dark theme styles for Bruce Bet Casino
  - Header color: #313131
  - Background: #242424
  - Comments describe key blocks and responsive behavior
*/

:root {
	--color-bg: #242424;
	--color-header: #313131;
	--color-text: #e7e7e7;
	--color-muted: #b5b5b5;
	--color-primary: #00d1b2;
	--color-primary-contrast: #0e0e0e;
	--radius: 12px;
	--container: 1200px;
	--gap: 1rem;
}

/* Reset + base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
	line-height: 1.6;
}

/* Global rising particles background behind everything */
.particles-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1rem; }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Header */
.site-header { background: var(--color-header); position: sticky; top: 0; z-index: 20; }
.header__row { display: flex; align-items: center; justify-content: space-between; padding-block: 0.75rem; }
.brand img { filter: drop-shadow(0 0 0 transparent); }

.nav__list { list-style: none; padding: 0; margin: 0; display: flex; gap: 0.5rem; }

/* Make the first header button explicitly green without changing global primary */
.main-nav .btn--primary { background: #16a34a; color: #061108; }
.main-nav .btn--primary:hover { transform: translateY(-1px); filter: brightness(1.05); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--radius); padding: 0.6rem 1rem; font-weight: 600; border: 1px solid transparent; transition: transform 0.12s ease, background-color 0.2s ease, border-color 0.2s ease; }
.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.btn--primary { background: var(--color-primary); color: var(--color-primary-contrast); }
.btn--primary:hover { transform: translateY(-1px); }
.btn--ghost { background: transparent; border-color: #4a4a4a; color: var(--color-text); }
.btn--ghost:hover { background: #3a3a3a; }

/* Breadcrumbs */
.breadcrumbs { background: #1f1f1f; border-block: 1px solid #2f2f2f; }
.breadcrumbs__list { list-style: none; display: flex; gap: 0.5rem; padding-block: 0.5rem; margin: 0; }
.breadcrumbs a { color: var(--color-muted); }
.breadcrumbs li+li::before { content: "/"; color: #666; margin-inline: 0.25rem; }

/* Hero banner with centered CTA overlay */
.hero { position: relative; }
.hero__particles { position: absolute; inset: 0; z-index: 0; }
.hero picture, .hero img { display: block; width: 100%; height: auto; }
.hero__cta {
    position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
    padding: clamp(1rem, 4vw, 2rem);
}
.hero__card {
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent card behind CTA */
    backdrop-filter: blur(4px);
    border: 1px solid #3a3a3a;
    border-radius: var(--radius);
    padding: clamp(1rem, 3vw, 1.5rem);
    max-width: 720px;
    width: min(92%, 720px);
    z-index: 1; /* ensure the card is above the particles */
}
.hero__cta h1 { font-size: clamp(1.25rem, 3vw, 2rem); margin: 0 0 0.5rem; }
.hero__cta p { margin: 0 0 1rem; color: var(--color-muted); }

/* Main content */
main { padding-block: 2rem; }

/* Slots grid: 12 images, responsive; 6 per row on desktop */
.slots h2 { margin-top: 0; }
.slots__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; padding: 0; margin: 1rem 0 2rem; list-style: none; }
@media (min-width: 480px) { .slots__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .slots__grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .slots__grid { grid-template-columns: repeat(6, 1fr); } }
.slots__item { background: #1f1f1f; border: 1px solid #2e2e2e; border-radius: var(--radius); overflow: hidden; }
.slot-link { display: block; transition: transform 0.15s ease, box-shadow 0.2s ease; }
.slot-link:hover, .slot-link:focus-visible { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.35); outline: none; }

/* Content lists */
.list { padding-left: 1rem; }
.list--ol { padding-left: 1.25rem; }

/* Tables: responsive wrapper. On small screens, convert to cards with data-labels. */
.table-wrap { border: 1px solid #333; border-radius: var(--radius); overflow: hidden; margin: 1rem 0; background: #1f1f1f; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 0.75rem; border-bottom: 1px solid #2c2c2c; vertical-align: top; }
.table thead th { background: #2b2b2b; text-align: left; }
.table tr:last-child th, .table tr:last-child td { border-bottom: none; }

/* Mobile table adaptation */
@media (max-width: 640px) {
	.table thead { display: none; }
	.table tr { display: grid; grid-template-columns: 1fr; padding: 0.5rem 0; }
	.table td, .table th[scope="row"] { display: grid; grid-template-columns: 10ch 1fr; gap: 0.75rem; border: none; border-bottom: 1px dashed #333; }
	.table td::before, .table th[scope="row"]::before {
		content: attr(data-label);
		color: var(--color-muted);
	}
	/* If th has no data-label, provide fallback label visually hidden via JS for a11y */
}

/* Footer */
.site-footer { background: #1f1f1f; border-top: 1px solid #2a2a2a; }
.footer__row { display: flex; flex-wrap: wrap; gap: var(--gap); align-items: center; justify-content: space-between; padding-block: 1rem; }
.payments { display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0; align-items: center; }

/* Skip link for keyboard users */
.skip-link { position: fixed; left: 0.5rem; top: 0.5rem; transform: translateY(-200%); background: #fff; color: #000; padding: 0.5rem 0.75rem; border-radius: 8px; z-index: 50; }
.skip-link:focus { transform: translateY(0); }

/* Typography tweaks */
h1, h2, h3 { line-height: 1.3; }
h2 { margin-top: 2rem; }
h3 { margin-top: 1.25rem; }

/* Utility */
.table-wrap:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; }