/* Design System: Professional casino guide with trustworthy, accessible design */

/* Layout: Single-column responsive with clear section hierarchy */



:root {

  /* Color palette */

  --primary: #ffd18a;

  --primary-light: #e5ccff;

  --accent: #b7a2f5;

  --accent-light: #3a2b52;

  --warning: #dc2626;

  --neutral-dark: #f8f4fc;

  --neutral-light: #29233b;

  --neutral-border: #514363;

  --text-primary: #f8f4fc;

  --text-secondary: #d2c9df;

  --bg-white: #12101d;



  /* Typography */

  --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;



  /* Spacing scale */

  --space-xs: 0.5rem;

  --space-sm: 1rem;

  --space-md: 1.5rem;

  --space-lg: 2rem;

  --space-xl: 3rem;

  --space-2xl: 4rem;

}



@media (prefers-color-scheme: dark) {

  :root:not([data-theme="light"]) {

    --text-primary: #f3f4f6;

    --text-secondary: #d1d5db;

    --bg-white: #1f2937;

    --neutral-light: #111827;

    --neutral-border: #374151;

    color-scheme: dark;

  }

}



:root[data-theme="dark"] {

  --text-primary: #f3f4f6;

  --text-secondary: #d1d5db;

  --bg-white: #1f2937;

  --neutral-light: #111827;

  --neutral-border: #374151;

  color-scheme: dark;

}



* {

  box-sizing: border-box;

}



body {

  font-family: var(--font-body);

  background: var(--bg-white);

  color: var(--text-primary);

  margin: 0;

  padding: 0 var(--space-md);

  line-height: 1.6;

  font-size: 1rem;

}



/* Typography */

h1 {

  font-size: 2.5rem;

  font-weight: 700;

  line-height: 1.2;

  margin: 0 0 var(--space-md) 0;

  text-wrap: balance;

}



h2 {

  font-size: 1.875rem;

  font-weight: 700;

  margin: var(--space-2xl) 0 var(--space-lg) 0;

  color: var(--primary);

  text-wrap: balance;

  border-bottom: 2px solid var(--primary);

  padding-bottom: var(--space-sm);

}



h3 {

  font-size: 1.25rem;

  font-weight: 600;

  margin: var(--space-lg) 0 var(--space-sm) 0;

  color: var(--primary);

}



h4 {

  font-size: 1.125rem;

  font-weight: 600;

  margin: var(--space-md) 0 var(--space-sm) 0;

}



p {

  margin: 0 0 var(--space-md) 0;

}



a {

  color: var(--primary-light);

  text-decoration: none;

  font-weight: 500;

}



a:hover {

  text-decoration: underline;

}



/* Layout containers */

.container {

  max-width: 900px;

  margin: 0 auto;

}



.header {

  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);

  color: white;

  padding: var(--space-2xl) 0;

  margin: 0 -var(--space-md);

  padding-left: var(--space-md);

  padding-right: var(--space-md);

}



.header h1 {

  color: white;

  margin-bottom: var(--space-sm);

}



.header p {

  font-size: 1.1rem;

  opacity: 0.95;

  margin: 0;

}



.nav {

  display: flex;

  gap: var(--space-md);

  flex-wrap: wrap;

  padding: var(--space-lg) 0;

  margin: 0 -var(--space-md);

  padding-left: var(--space-md);

  padding-right: var(--space-md);

  border-bottom: 1px solid var(--neutral-border);

  position: sticky;

  top: env(safe-area-inset-top, 0px);

  background: var(--bg-white);

  z-index: 100;

  font-size: 0.95rem;

}



.nav a {

  color: var(--primary);

  text-decoration: none;

  font-weight: 500;

  transition: color 0.2s;

}



.nav a:hover {

  color: var(--accent);

}



/* Cards & sections */

.card {

  background: var(--neutral-light);

  border: 1px solid var(--neutral-border);

  border-radius: 8px;

  padding: var(--space-lg);

  margin: var(--space-lg) 0;

}



.card-list {

  display: grid;

  gap: var(--space-lg);

  margin: var(--space-lg) 0;

}



.card-item {

  background: var(--neutral-light);

  border-left: 4px solid var(--primary);

  padding: var(--space-md);

  border-radius: 4px;

}



.card-item h4 {

  margin-top: 0;

  color: var(--primary);

}



/* Casino review cards */

.casino-card {

  background: var(--neutral-light);

  border-radius: 8px;

  overflow: hidden;

  margin: var(--space-lg) 0;

  border: 1px solid var(--neutral-border);

}



.casino-card-header {

  background: var(--primary);

  color: white;

  padding: var(--space-md);

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.casino-card-header h3 {

  color: white;

  margin: 0;

  border: none;

  padding: 0;

}



.rating {

  background: var(--accent);

  color: white;

  padding: var(--space-xs) var(--space-sm);

  border-radius: 4px;

  font-weight: 700;

  font-size: 1.25rem;

}



.casino-card-body {

  padding: var(--space-lg);

}



.feature-list {

  list-style: none;

  padding: 0;

  margin: var(--space-md) 0;

}



.feature-list li {

  padding: var(--space-sm) 0;

  padding-left: var(--space-lg);

  position: relative;

}



.feature-list li:before {

  content: "✓";

  position: absolute;

  left: 0;

  color: var(--accent);

  font-weight: bold;

}



/* Tables */

table {

  width: 100%;

  border-collapse: collapse;

  margin: var(--space-lg) 0;

  overflow-x: auto;

}



th {

  background: var(--primary);

  color: white;

  padding: var(--space-md);

  text-align: left;

  font-weight: 600;

}



td {

  padding: var(--space-md);

  border-bottom: 1px solid var(--neutral-border);

}



tr:nth-child(even) {

  background: var(--neutral-light);

}



/* Lists */

ul, ol {

  margin: var(--space-md) 0;

  padding-left: var(--space-lg);

}



li {

  margin: var(--space-sm) 0;

}



/* Callouts */

.callout {

  background: var(--accent-light);

  color: white;

  padding: var(--space-lg);

  border-radius: 8px;

  margin: var(--space-lg) 0;

  border-left: 4px solid var(--accent);

}



.warning {

  background: rgba(220, 38, 38, 0.1);

  border-left: 4px solid var(--warning);

  color: var(--text-primary);

  padding: var(--space-lg);

  border-radius: 4px;

  margin: var(--space-lg) 0;

}



.faq-item {

  margin: var(--space-lg) 0;

  border: 1px solid var(--neutral-border);

  border-radius: 4px;

  overflow: hidden;

}



.faq-question {

  background: var(--neutral-light);

  padding: var(--space-md);

  font-weight: 600;

  cursor: pointer;

  display: flex;

  justify-content: space-between;

  align-items: center;

  user-select: none;

}



.faq-question:hover {

  background: var(--neutral-border);

}



.faq-answer {

  padding: var(--space-md);

  display: none;

  border-top: 1px solid var(--neutral-border);

}



.faq-answer.active {

  display: block;

}



/* Footer */

.footer {

  background: var(--neutral-dark);

  color: var(--neutral-light);

  padding: var(--space-2xl) var(--space-md);

  margin-top: var(--space-2xl);

  margin-left: -var(--space-md);

  margin-right: -var(--space-md);

  font-size: 0.9rem;

  line-height: 1.8;

}



.footer h4 {

  color: white;

}



.footer a {

  color: var(--primary-light);

}



/* Responsive */

@media (max-width: 768px) {

  h1 { font-size: 1.75rem; }

  h2 { font-size: 1.5rem; }

  h3 { font-size: 1.125rem; }



  .nav {

    gap: var(--space-sm);

    font-size: 0.85rem;

  }



  table {

    font-size: 0.9rem;

  }



  th, td {

    padding: var(--space-sm);

  }

}



/* Utility classes */

.text-center {

  text-align: center;

}



.text-muted {

  color: var(--text-secondary);

}



.mt-lg {

  margin-top: var(--space-lg);

}



.mb-lg {

  margin-bottom: var(--space-lg);

}



/* Toggle for FAQ */

input[type="checkbox"] {

  display: none;

}



.faq-toggle:checked \~ .faq-answer {

  display: block;

}


:root{--primary:#48228c;--primary-light:#7c4bd3;--accent:#087d65;--accent-light:#0a6f59;--neutral-dark:#171327;--neutral-light:#f6f3fc;--neutral-border:#ddd6ec;--text-primary:#211c30;--text-secondary:#554d67;--bg-white:#fff}
body{padding:0;background:#fff} .container{max-width:1050px;padding:0 22px} .header{margin:0;padding:64px 0;background:linear-gradient(135deg,#21113e,#6237a0)}.nav{margin:0;padding:12px 0}.nav .container{display:flex;gap:20px;flex-wrap:wrap}.hero-kicker{font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:#d5c3ff;margin-bottom:12px}.lede{font-size:1.13rem;max-width:850px}.tag{display:inline-block;background:#eee7fc;border-radius:50px;padding:6px 12px;margin:4px;color:#47228b;font-size:.85rem}.toc{background:#f6f3fc;border-radius:12px;padding:20px;margin:26px 0}.toc a{display:inline-block;margin:5px 12px 5px 0}.table-scroll{overflow-x:auto}.footer{margin:70px 0 0}.faq-question{cursor:pointer}.faq-question:focus-visible{outline:3px solid #7952c9} .faq-answer{display:none}.faq-answer.active{display:block}.warning{line-height:1.7} .source-note{font-size:.88rem;color:var(--text-secondary)} @media(max-width:700px){.header{padding:40px 0}.container{padding:0 16px}th,td{padding:10px;min-width:100px}}

/* Contrast-safe dark purple and gold palette, inspired by the original pokies styling. */
:root{color-scheme:dark}
body{background:#12101d;color:#f8f4fc}
main section,.casino-card,.faq-item{color:#f8f4fc}
h1{color:#fff}h2,h3{color:#ffd18a}
.header{background:linear-gradient(125deg,#21172f,#342440)!important;color:#fff}
.header h1,.header p,.header .hero-kicker{color:#fff}
.nav{background:#1c192c;color:#f8f4fc}
.nav a{color:#f5e9ff}
.nav a:hover{color:#ffd18a}
a{color:#e5ccff}a:hover{color:#ffd18a}
.faq-question,.faq-question span{color:#f8f4fc!important;background:#29233b}
.faq-answer{background:#1c192c;color:#f8f4fc}
table,td,th{color:#f8f4fc}thead,th{background:#352544;color:#fff}
tr:nth-child(even){background:#29233b}
.warning{background:#352b26;color:#fff0dc;border-color:#b58a55}
.warning a{color:#ffe0a8}
.footer{background:#1c192c;color:#f8f4fc}
.footer a{color:#e5ccff}
button{cursor:pointer}
/* Compact, readable navigation labels without clipping */
.nav .container{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center}
.nav a{display:inline-block;white-space:normal;overflow:visible;text-overflow:clip;max-width:none;flex:0 0 auto;font-size:.88rem;line-height:1.45}
@media(max-width:700px){.nav .container{gap:8px 14px}.nav a{font-size:.84rem}}



.editorial-illustration{margin:18px 0 24px;max-width:100%}.editorial-illustration img{display:block;width:100%;height:auto;max-height:390px;object-fit:cover;border-radius:14px;border:1px solid rgba(255,209,138,.3)}.editorial-illustration figcaption{font-size:12px;color:#c9bfd8;margin-top:7px;line-height:1.5}