/* procasino1 — shared dark editorial system */
:root{
  --bg:#0b0d12; --bg-2:#10131b; --card:#161a24; --card-2:#1b2030;
  --line:#2a3040; --text:#e6e8ef; --muted:#97a0b4;
  --gold:#ffc14d; --gold-dk:#c9860f; --green:#3ddc97; --red:#ff6b6b;
  --radius:14px;
}
html{-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box}
body.site{
  margin:0; background:var(--bg); color:var(--text);
  font:400 18px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  overflow-wrap:break-word;
}
/* One photoreal gold-tinted cabinet. Never tile, never stack a second copy. */
body.site::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-color:var(--bg);
  background-image:
    linear-gradient(180deg, rgba(11,13,18,.28) 0%, rgba(11,13,18,.62) 42%, rgba(11,13,18,.92) 78%, var(--bg) 100%),
    url("/assets/img/slot-cabinet.jpg");
  background-repeat:no-repeat, no-repeat;
  background-position:center top, center 4%;
  background-size:100% 100%, min(540px, 78vw) auto;
}
body.site > *{position:relative; z-index:1}
body.site > #age-gate,
body.site > .age-gate{position:fixed !important; z-index:2147483646 !important}
.wrap{max-width:860px; margin:0 auto; padding:0 16px}
a{color:var(--gold); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.25; margin:0 0 12px; font-weight:700; letter-spacing:-.01em}
h1{font-size:32px}
h2{font-size:22px; margin-top:38px; padding-top:4px}
h3{font-size:18px; margin-top:24px}
p{margin:0 0 14px}
ul,ol{margin:0 0 14px; padding-left:22px}
li{margin-bottom:8px}
strong{color:#fff}
.muted{color:var(--muted)}
.small{font-size:14px; line-height:1.55}

.top{border-bottom:1px solid var(--line); background:rgba(16,19,27,.94); backdrop-filter:saturate(1.1)}
.top > .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; padding-bottom:12px; flex-wrap:wrap}
.mainnav{display:flex; flex-wrap:wrap; align-items:center; gap:6px; flex:1 1 auto}
.mainnav a{
  display:inline-block; font-size:15px; font-weight:700; color:#fff;
  text-decoration:none; padding:6px 12px; border-radius:9px;
}
.mainnav a:hover{color:var(--gold); text-decoration:none}
.mainnav a[aria-current="page"]{color:var(--gold)}
.mainnav a.nav-blog{
  border:1px solid var(--gold); color:#14100a; background:var(--gold);
}
.mainnav a.nav-blog:hover{background:#ffd27a; color:#14100a}
.logo{font-weight:800; font-size:17px; color:#fff; letter-spacing:.02em}
.logo a{color:#fff; text-decoration:none}
.logo span{color:var(--gold)}
.badge18{border:1px solid var(--line); border-radius:999px; padding:4px 11px; font-size:12px; color:var(--muted); white-space:nowrap}

.sitenav{border-top:1px solid var(--line)}
.sitenav ul{display:flex; flex-wrap:wrap; align-items:center; gap:6px; list-style:none; margin:0; padding:9px 0}
.sitenav ul + ul{border-top:1px solid var(--line)}
.sitenav li{margin:0}
.sitenav .nav-label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:#6f778e; padding-right:4px}
.sitenav a{
  display:inline-block; font-size:14px; color:var(--muted); text-decoration:none;
  border:1px solid var(--line); border-radius:999px; padding:5px 12px; background:var(--card);
}
.sitenav a:hover{color:var(--gold); border-color:var(--gold-dk); text-decoration:none}
.sitenav a[aria-current="page"]{background:var(--gold); border-color:var(--gold); color:#14100a; font-weight:700}

.hero{padding:26px 0 4px}
.hero h1,.hero .lead{text-align:center}
.lead{font-size:20px}
.hero-points{list-style:none; padding:0; margin:18px 0 16px}
.hero-points li{position:relative; padding-left:26px; color:var(--text); font-size:16px}
.hero-points li::before{content:"→"; position:absolute; left:0; color:var(--gold); font-weight:700}
.notice{
  border:1px solid var(--line); border-left:3px solid var(--gold);
  background:var(--bg-2); border-radius:10px; padding:12px 14px; margin:0 0 8px;
  font-size:14px; line-height:1.55; color:var(--muted);
}
.updated{font-size:13px; color:var(--muted); margin:14px 0 0}

.cover{
  margin:0 0 18px; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; background:var(--card); aspect-ratio:16/9;
}
.cover img{display:block; width:100%; height:100%; object-fit:cover}
.cover.slot-hero{background:#080a0e; display:flex; align-items:center; justify-content:center; padding:18px 16px 10px; min-height:280px}
.cover.slot-hero svg,.cover.slot-hero img{width:min(280px,72%); height:auto; display:block; filter:drop-shadow(0 0 18px rgba(255,193,77,.4))}
html.age-ok #age-gate{display:none !important}
.cover figcaption{font-size:12.5px; color:var(--muted); padding:8px 12px 10px}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; margin-bottom:12px;
}
.card h3{margin:0 0 8px; font-size:19px}
.card .who{margin:0; font-size:14px; color:var(--muted)}

.qnav{display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 4px; padding:0; list-style:none}
.qnav li{margin:0}
.qnav a{
  display:inline-block; font-size:14px; color:var(--muted); text-decoration:none;
  border:1px solid var(--line); border-radius:999px; padding:5px 12px; background:var(--bg-2);
}
.qnav a:hover{color:var(--gold); border-color:var(--gold-dk); text-decoration:none}

.tw{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--radius); margin:0 0 10px}
table{border-collapse:collapse; width:100%; min-width:620px; font-size:14.5px}
caption{text-align:left; padding:12px 14px 0; color:var(--muted); font-size:14px}
th,td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
thead th{background:var(--card-2); color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
tbody tr:nth-child(even){background:rgba(255,255,255,.018)}
td b{color:#fff}

.faq h3{font-size:17px; margin:22px 0 8px; padding-left:22px; position:relative}
.faq h3::before{content:"?"; position:absolute; left:0; color:var(--gold); font-weight:800}
.flags li::marker{color:var(--red)}
.steps li::marker{color:var(--gold); font-weight:700}

pre.tmpl{
  border:1px solid var(--line); border-left:3px solid var(--gold-dk); background:var(--card);
  border-radius:10px; padding:14px 16px; margin:0 0 14px;
  font:inherit; font-size:14.5px; line-height:1.6; color:var(--text);
  white-space:pre-wrap; overflow-wrap:break-word;
}

.blog-grid{display:grid; grid-template-columns:1fr; gap:14px; margin:18px 0 8px}
.blog-item{
  display:grid; grid-template-columns:1fr; gap:0;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--card); overflow:hidden;
  text-decoration:none; color:inherit;
}
.blog-item:hover{border-color:var(--gold-dk); text-decoration:none}
.blog-item img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block}
.blog-item .meta{padding:14px 16px 16px}
.blog-item h3{margin:0 0 6px; font-size:18px; color:#fff}
.blog-item p{margin:0; font-size:14.5px; color:var(--muted)}
.kicker{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); margin:0 0 6px}
.code{
  display:inline-block; background:#221b0a; border:1px solid var(--gold-dk); color:var(--gold);
  border-radius:6px; padding:0 7px; font:700 14px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

.related{border:1px solid var(--line); background:var(--bg-2); border-radius:var(--radius); padding:16px; margin-top:30px}
.related h2{font-size:18px; margin:0 0 10px; padding-top:0}
.related ul{margin:0; padding-left:20px}
.related li{font-size:15px}

footer{border-top:1px solid var(--line); margin-top:44px; background:var(--bg-2)}
footer .wrap{padding-top:24px; padding-bottom:34px}
footer p{font-size:13.5px; line-height:1.6; color:var(--muted)}
footer .disc{color:var(--text); font-weight:600}

/* tighten existing gold buttons on inner pages — keep usable, less landing */
body.site .btn{
  background:transparent; color:var(--gold); border:1px solid var(--gold-dk);
}
body.site .btn:hover{background:#221c12; text-decoration:none}

/* Age gate — must beat body.site > * { position:relative } */
html.age-wait, html.age-wait body.site{
  overflow:hidden !important;
  height:100% !important;
  max-height:100vh !important;
}
html.age-wait body.site > header,
html.age-wait body.site > main,
html.age-wait body.site > footer,
html.age-wait body.site > aside,
html.age-wait body.site > article{
  display:none !important;
}
body.site > #age-gate.age-gate,
#age-gate.age-gate,
.age-gate{
  position:fixed !important;
  inset:0 !important;
  left:0 !important; top:0 !important; right:0 !important; bottom:0 !important;
  z-index:2147483646 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  width:100vw !important;
  height:100vh !important;
  height:100dvh !important;
  padding:20px !important;
  background:rgba(6,8,12,.88) !important;
  box-sizing:border-box !important;
}
.age-card{
  width:min(440px,100%); background:var(--card); border:1px solid var(--gold);
  border-radius:16px; padding:22px 22px 20px; box-shadow:0 16px 50px rgba(0,0,0,.45);
}
.age-card h2{margin:0 0 10px; font-size:24px}
.age-actions{display:flex; gap:10px; margin-top:16px}
.age-yes,.age-no{
  flex:1; font:inherit; font-weight:800; font-size:16px; border-radius:10px;
  padding:11px 14px; cursor:pointer;
}
.age-yes{background:var(--gold); color:#14100a; border:0}
.age-yes:hover{background:#ffd27a}
.age-no{background:transparent; color:var(--muted); border:1px solid var(--line)}
.age-no:hover{color:#fff; border-color:var(--red)}
.age-denied-screen{
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:32px 20px;
  background:var(--bg); color:var(--text);
}
.age-denied-screen h1{font-size:28px}

/* Promo search + forms */
.searchbar{
  display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 20px;
  padding:12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-2);
}
.searchbar label{width:100%; font-size:13px; color:var(--muted); margin:0}
.searchbar input[type="search"]{
  flex:1 1 220px; background:var(--bg); color:var(--text); border:1px solid var(--line);
  border-radius:9px; padding:10px 12px; font:inherit; font-size:16px;
}
.searchbar input[type="search"]:focus{outline:2px solid var(--gold-dk); outline-offset:1px}
.searchbar button{
  background:var(--gold); color:#14100a; border:0; border-radius:9px;
  font:inherit; font-weight:700; padding:10px 16px; cursor:pointer;
}
.form-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px}
.form-card .field{margin:0 0 14px}
.form-card label{display:block; font-size:14px; color:var(--muted); margin-bottom:5px}
.form-card input,.form-card textarea,.form-card select{
  width:100%; background:var(--bg); color:var(--text); border:1px solid var(--line);
  border-radius:9px; padding:10px 12px; font:inherit; font-size:16px;
}
.form-card textarea{min-height:160px; resize:vertical}
.form-card .hp{position:absolute; left:-9999px; opacity:0}
.form-card .check{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--text)}
.form-card .check input{width:auto; margin-top:4px}
.form-card button[type="submit"]{
  background:var(--gold); color:#14100a; border:0; border-radius:10px;
  font:inherit; font-weight:700; font-size:16px; padding:11px 22px; cursor:pointer;
}

@media (min-width:640px){
  .blog-grid{grid-template-columns:1fr 1fr}
}
@media (min-width:720px){
  h1{font-size:40px}
  h2{font-size:26px; margin-top:48px}
  .lead{font-size:22px}
  .hero{padding:36px 0 4px}
  .related h2{font-size:20px}
}