/* ===================================================
   Casino Royale Australia — stylesheet
   Premium dark "royale" theme: crimson + gold on ink
   =================================================== */

:root{
  --c-ink:      #0b0c10;
  --c-panel:    #0f1117;
  --c-panel-2:  #161922;
  --c-line:     #262a36;
  --c-gold:     #d4af37;
  --c-gold-lt:  #f0d67c;
  --c-red:      #8b1224;
  --c-red-lt:   #b01e32;
  --c-text:     #e9e7e0;
  --c-muted:    #9aa0ad;
  --c-white:    #f5f4f0;
  --r:          14px;
  --shadow:     0 18px 50px rgba(0,0,0,.55);
  --maxw:       1140px;
  --font-head:  "Cormorant Garamond", Georgia, serif;
  --font-body:  "Sora", system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--c-text);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(139,18,36,.28), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(212,175,55,.10), transparent 55%),
    var(--c-ink);
  line-height:1.7;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--c-gold-lt); text-decoration:none; }
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px; }

/* ---------- Headings ---------- */
h1,h2,h3{ font-family:var(--font-head); font-weight:700; line-height:1.12; color:var(--c-white); }
h1{ font-size:clamp(2.6rem,6vw,4.4rem); margin:.2em 0; letter-spacing:.5px; }
h2{ font-size:clamp(1.7rem,3.4vw,2.5rem); margin:0 0 .5em; position:relative; padding-bottom:.35em; }
h2::after{ content:""; position:absolute; left:0; bottom:0; width:64px; height:3px;
  background:linear-gradient(90deg,var(--c-gold),transparent); border-radius:2px; }
h3{ font-size:clamp(1.25rem,2.2vw,1.6rem); margin:1.4em 0 .5em; color:var(--c-gold-lt); }
p{ margin:0 0 1.05em; }
strong{ color:var(--c-white); font-weight:600; }
em{ color:var(--c-gold-lt); font-style:italic; }

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--font-body); font-weight:600; font-size:.95rem;
  border:none; border-radius:999px; padding:.8em 1.7em; cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
  letter-spacing:.3px; display:inline-flex; align-items:center; gap:.5em;
}
.btn:active{ transform:translateY(1px); }
.btn-gold{
  background:linear-gradient(135deg,var(--c-gold-lt),var(--c-gold));
  color:#2a1d05;
  box-shadow:0 8px 24px rgba(212,175,55,.32);
}
.btn-gold:hover{ filter:brightness(1.07); box-shadow:0 12px 30px rgba(212,175,55,.45); }
.btn-ghost{
  background:transparent; color:var(--c-white);
  border:1px solid var(--c-line);
}
.btn-ghost:hover{ border-color:var(--c-gold); color:var(--c-gold-lt); }
.btn-lg{ font-size:1.05rem; padding:1em 2.2em; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,12,16,.82);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--c-line);
}
.header-inner{ display:flex; align-items:center; gap:24px; padding-top:12px; padding-bottom:12px; }
.brand img{ height:52px; width:auto; }
.main-nav{ display:flex; gap:26px; margin-left:8px; flex:1; }
.main-nav a{ color:var(--c-text); font-weight:400; font-size:.95rem; position:relative; }
.main-nav a:hover{ color:var(--c-gold-lt); }
.main-nav a::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px;
  background:var(--c-gold); transition:width .2s ease; }
.main-nav a:hover::after{ width:100%; }
.header-cta{ display:flex; gap:10px; }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; padding:46px 0 30px; }
.hero-glow{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(700px 360px at 75% 30%, rgba(212,175,55,.18), transparent 60%); }
.hero-inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:30px; align-items:center; }
.hero-kicker{ text-transform:uppercase; letter-spacing:3px; font-size:.8rem; color:var(--c-gold);
  margin:0 0 .2em; font-weight:600; }
.hero-sub{ font-size:1.12rem; color:var(--c-muted); max-width:34ch; margin-bottom:1.4em; }
.rating-badge{
  display:inline-flex; align-items:center; gap:.4em;
  background:var(--c-panel-2); border:1px solid var(--c-line);
  border-radius:999px; padding:.4em 1em; margin-bottom:1em;
}
.rating-num{ font-family:var(--font-head); font-size:1.7rem; font-weight:700; color:var(--c-gold); }
.rating-den{ color:var(--c-muted); }
.rating-label{ font-size:.78rem; color:var(--c-muted); margin-left:.4em; text-transform:uppercase; letter-spacing:1px; }
.hero-points{ list-style:none; padding:0; margin:1.6em 0 0; display:flex; flex-wrap:wrap; gap:12px; }
.hero-points li{ font-size:.85rem; color:var(--c-text);
  background:var(--c-panel-2); border:1px solid var(--c-line);
  padding:.5em 1em; border-radius:999px; }
.hero-points li::before{ content:"✦ "; color:var(--c-gold); }
.hero-art{ position:relative; min-height:420px; display:flex; align-items:center; justify-content:center; }
.hero-main{ border-radius:var(--r); box-shadow:var(--shadow); border:1px solid var(--c-line); }
.float{ position:absolute; filter:drop-shadow(0 10px 20px rgba(0,0,0,.5)); }
.float.coins{ top:-6px; left:-10px; animation:bob 5s ease-in-out infinite; }
.float.coin{ bottom:6px; right:-6px; animation:bob 6s ease-in-out infinite .6s; }
.float.confetti{ top:10px; right:0; opacity:.9; animation:bob 7s ease-in-out infinite .3s; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }

/* ---------- Content blocks ---------- */
.content{ padding:30px 0 10px; }
.block{
  background:var(--c-panel);
  border:1px solid var(--c-line);
  border-radius:var(--r);
  padding:34px 32px;
  margin:0 0 26px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.block .btn{ margin-top:.6em; }

/* ---------- Tables ---------- */
.table-wrap{ overflow-x:auto; margin:1.2em 0; border-radius:10px; border:1px solid var(--c-line); }
.tbl{ width:100%; border-collapse:collapse; min-width:480px; font-size:.94rem; }
.tbl th, .tbl td{ padding:13px 16px; text-align:left; border-bottom:1px solid var(--c-line); }
.tbl thead th{
  background:linear-gradient(180deg,var(--c-panel-2),#11141c);
  color:var(--c-gold-lt); font-weight:600; text-transform:uppercase;
  letter-spacing:.6px; font-size:.78rem;
}
.tbl tbody tr:nth-child(even){ background:rgba(255,255,255,.015); }
.tbl tbody tr:hover{ background:rgba(212,175,55,.06); }
.tbl tfoot td{ background:var(--c-panel-2); font-size:.95rem; padding:14px 16px; }
.td-strong{ color:var(--c-gold-lt); font-weight:600; }
.tbl-info td:first-child{ width:42%; color:var(--c-muted); font-weight:400; }
.tbl-info .ic{ display:flex; align-items:center; gap:10px; }
.tbl-info .ic img{ border-radius:6px; }
.tbl-score td:first-child{ font-weight:500; color:var(--c-white); }
.stars{ color:var(--c-gold); letter-spacing:2px; font-size:1.05rem; }

/* ---------- Lists ---------- */
.steps{ counter-reset:step; list-style:none; padding:0; margin:1em 0; }
.steps li{ counter-increment:step; position:relative; padding:.5em 0 .5em 48px; border-bottom:1px dashed var(--c-line); }
.steps li:last-child{ border-bottom:none; }
.steps li::before{
  content:counter(step); position:absolute; left:0; top:.45em;
  width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg,var(--c-gold-lt),var(--c-gold));
  color:#2a1d05; font-weight:700; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-body); font-size:.9rem;
}
.ticks, .crosses, .game-list{ list-style:none; padding:0; margin:1em 0; }
.ticks li, .crosses li{ padding:.35em 0 .35em 30px; position:relative; }
.ticks li::before{ content:"✔"; position:absolute; left:0; color:var(--c-gold); font-weight:700; }
.crosses li::before{ content:"✕"; position:absolute; left:0; color:var(--c-red-lt); font-weight:700; }
.game-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px 18px; }
.game-list.two-col{ grid-template-columns:repeat(2,1fr); }
.game-list li{ padding:.5em .9em; background:var(--c-panel-2); border:1px solid var(--c-line);
  border-radius:8px; font-size:.9rem; }
.game-list li::before{ content:"🎰 "; }

/* ---------- Bonus block ---------- */
.bonus-block{ background:
  linear-gradient(180deg, rgba(139,18,36,.18), transparent 40%), var(--c-panel); }
.bonus-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center; margin-bottom:1em; }
.bonus-card{
  background:var(--c-panel-2); border:1px solid var(--c-gold);
  border-radius:var(--r); padding:30px; text-align:center;
  box-shadow:0 0 40px rgba(212,175,55,.12);
}
.bonus-pct{ font-family:var(--font-head); font-size:4rem; font-weight:700;
  background:linear-gradient(135deg,var(--c-gold-lt),var(--c-gold));
  -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; }
.bonus-card h3{ color:var(--c-white); margin:.2em 0 .3em; }
.bonus-note{ color:var(--c-muted); font-size:.9rem; margin-bottom:1.2em; }
.bonus-img img{ border-radius:var(--r); border:1px solid var(--c-line); box-shadow:var(--shadow); }

/* ---------- Image rows / grids ---------- */
.img-row{ margin:1.4em 0; }
.img-row img{ border-radius:var(--r); border:1px solid var(--c-line); box-shadow:var(--shadow); margin:0 auto; }
.prov-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:1.2em 0; }
.prov-grid img{ border-radius:10px; border:1px solid var(--c-line); width:100%; height:auto; }
.pay-grid, .footer-pays{ display:flex; flex-wrap:wrap; gap:10px; margin:1.2em 0; }
.pay-grid img, .footer-pays img{ border-radius:8px; border:1px solid var(--c-line); }

/* ---------- Safety / app / pros-cons ---------- */
.safety-grid, .app-grid, .safety-block .safety-grid{ display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center; }
.safety-grid img{ border-radius:var(--r); border:1px solid var(--c-line); }
.app-grid{ grid-template-columns:1fr auto; }
.app-grid img{ border-radius:var(--r); border:1px solid var(--c-line); box-shadow:var(--shadow); }
.proscons{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:1em 0; }
.pros, .cons{ background:var(--c-panel-2); border:1px solid var(--c-line); border-radius:var(--r); padding:22px 24px; }
.pros{ border-top:3px solid var(--c-gold); }
.cons{ border-top:3px solid var(--c-red-lt); }
.pros h3, .cons h3{ margin-top:0; }

/* ---------- FAQ ---------- */
.faq details{
  background:var(--c-panel-2); border:1px solid var(--c-line);
  border-radius:10px; margin-bottom:10px; padding:0 18px;
}
.faq summary{
  cursor:pointer; font-weight:500; color:var(--c-white);
  padding:16px 0; list-style:none; position:relative; padding-right:30px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:4px; top:14px; font-size:1.4rem; color:var(--c-gold); transition:transform .2s; }
.faq details[open] summary::after{ content:"−"; }
.faq details p{ padding-bottom:16px; margin:0; color:var(--c-muted); }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--c-line); margin-top:40px; padding:36px 0 60px;
  background:linear-gradient(180deg, transparent, rgba(139,18,36,.10)); text-align:center; }
.footer-pays{ justify-content:center; }
.footer-copy{ max-width:70ch; margin:1em auto 1.4em; color:var(--c-muted); }
.age-badge{ width:54px; height:54px; border-radius:50%; border:2px solid var(--c-gold);
  color:var(--c-gold); font-weight:700; display:flex; align-items:center; justify-content:center;
  margin:0 auto 1.4em; font-family:var(--font-head); font-size:1.2rem; }
.footer-banner{ border-radius:var(--r); border:1px solid var(--c-line); margin:0 auto 1.4em; }
.footer-fine{ font-size:.8rem; color:var(--c-muted); max-width:80ch; margin:0 auto; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-art{ min-height:340px; order:-1; }
  .bonus-grid, .proscons, .safety-grid, .app-grid{ grid-template-columns:1fr; }
  .app-grid img{ margin:0 auto; }
  .prov-grid{ grid-template-columns:repeat(2,1fr); }
  .main-nav{ display:none; }
}
@media (max-width:560px){
  .block{ padding:24px 18px; }
  .header-cta .btn-ghost{ display:none; }
  .game-list{ grid-template-columns:1fr; }
  .bonus-pct{ font-size:3rem; }
}