/* freecasinogames.fun: a downtown Vegas sign at night. Marquee red, bulb gold, neon turquoise and pink on night-sky black.
   Block marquee letters (Bungee), neon script for the small words (Yellowtail). Each game tile keeps its own table color. */
:root{--night:#07060b;--night2:#110c16;--panel:#16101a;--line:rgba(255,214,140,.14);--ink:#fbf3e4;--muted:#c6b6a3;
  --red:#d7192f;--red2:#9e0f22;--gold:#ffd23f;--gold2:#ffb81c;--bulb:#fff6c9;--teal:#19e3d6;--pink:#ff3d7f;--orange:#ff8a1f;--max:1160px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:16px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums;
  background:radial-gradient(900px 520px at 12% -80px,rgba(215,25,47,.32),transparent 70%),radial-gradient(800px 500px at 95% 10%,rgba(25,227,214,.14),transparent 70%),
    radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 70% 12%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 85% 40%,rgba(255,255,255,.35),transparent),var(--night)}
a{color:var(--gold)}a:hover{color:#fff}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.lead{font-size:1.15rem;color:var(--muted);max-width:60ch;margin:18px 0 30px}
.sub{color:var(--muted);margin:0 0 18px}

/* header: a small lit sign */
.hdr{position:sticky;top:0;z-index:30;background:rgba(7,6,11,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:2px solid var(--red2);box-shadow:0 2px 18px rgba(215,25,47,.25);padding-top:env(safe-area-inset-top,0px)}
.hdr .wrap{display:flex;align-items:center;gap:12px;height:62px}
.logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:400 19px/1 Bungee,Impact,sans-serif;letter-spacing:.01em}
.logo em{font:400 26px/1 Yellowtail,cursive;color:var(--teal);text-shadow:0 0 6px rgba(25,227,214,.8),0 0 16px rgba(25,227,214,.5);margin-right:2px;text-transform:none}
.logo i{font-style:normal;color:var(--gold);text-shadow:0 0 8px rgba(255,210,63,.6)}
.mark{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;color:#fff;font:900 17px/1 Georgia,serif;background:radial-gradient(circle,var(--red) 0 54%,var(--gold) 55% 62%,var(--red2) 63% 68%,var(--gold) 69%);box-shadow:0 0 12px rgba(255,210,63,.45);flex:none}
.nav{margin-left:auto;display:flex;gap:2px}
.nav a{padding:8px 11px;border-radius:999px;color:var(--muted);text-decoration:none;font:400 13px/1 Bungee,Impact,sans-serif;letter-spacing:.04em}
.nav a:hover{color:var(--gold);text-shadow:0 0 8px rgba(255,210,63,.7)}
@media (max-width:560px){.nav .hide-s{display:none}.logo{font-size:15px}.logo em{font-size:22px}}

/* the marquee: a red sign face between a gold outer rim and a thin bulb-white inner rim, a channel of real round bulbs
   (placed by hub.js, evenly around the frame) that chase in runs of three, gold-lit letters, an arrow pointer plate, a starburst */
.lobby{padding-top:50px;padding-bottom:16px}
.marquee{position:relative;max-width:840px;margin-top:14px}
.sign{position:relative;padding:58px 64px 46px;border-radius:30px;background:radial-gradient(120% 90% at 30% 20%,#e3243a 0,#b5122a 55%,#7d0a1b 100%);
  border:7px solid var(--gold2);box-shadow:0 0 0 3px #3a0710,0 0 0 9px #1a0306,0 0 50px rgba(215,25,47,.55),inset 0 0 0 26px rgba(0,0,0,.18),inset 0 0 0 28px rgba(255,246,201,.5)}
.bulbs{position:absolute;inset:0;pointer-events:none}
.bulbs i{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fffdf0 0 25%,#ffe58a 45%,#c98a12 100%);
  box-shadow:0 0 6px 2px rgba(255,214,90,.75),0 0 16px 4px rgba(255,190,40,.35);opacity:.35;transition:opacity .08s linear}
.bulbs i.on{opacity:1}
.sign .free{position:absolute;left:28px;top:-34px;font:400 clamp(3rem,8vw,4.6rem)/1 Yellowtail,cursive;color:#d9fffc;transform:rotate(-8deg);
  text-shadow:0 0 3px #fff,0 0 10px var(--teal),0 0 22px var(--teal),0 0 44px rgba(25,227,214,.7);z-index:3}
.sign h1{margin:6px 0 0;font:400 clamp(2.3rem,6.6vw,4.6rem)/1.02 Bungee,Impact,sans-serif;letter-spacing:.01em;text-wrap:balance;
  background:linear-gradient(180deg,#fff7cf 0%,#ffe066 45%,#ffad1f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 #5b0612) drop-shadow(0 0 14px rgba(255,200,60,.55))}
.sign h1 span{white-space:nowrap}
.sign h1 .fun{display:inline-block;margin-left:.12em;font:400 .78em/1 Yellowtail,cursive;transform:rotate(-8deg) translateY(.12em);background:none;-webkit-text-fill-color:#ffe6ef;color:#ffe6ef;
  text-shadow:0 0 3px #fff,0 0 10px var(--pink),0 0 22px var(--pink),0 0 44px rgba(255,61,127,.7)}
.sign .arrow{display:inline-flex;margin-top:22px;filter:drop-shadow(0 0 14px rgba(25,227,214,.55))}
.sign .arrow span{position:relative;padding:11px 38px 11px 20px;background:var(--teal);color:#03302d;font:400 clamp(.72rem,1.8vw,.98rem)/1.25 Bungee,Impact,sans-serif;letter-spacing:.05em;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%);border-radius:6px 0 0 6px}
.star{position:absolute;right:-40px;top:-58px;width:140px;height:140px;z-index:4;filter:drop-shadow(0 0 10px rgba(255,210,63,.8));animation:twinkle 3.2s ease-in-out infinite}
@keyframes twinkle{50%{transform:rotate(12deg) scale(1.06);filter:drop-shadow(0 0 18px rgba(255,210,63,1))}}
@media (max-width:600px){.sign{padding:50px 30px 34px;border-radius:24px}.sign .free{left:16px;top:-30px}.star{width:92px;height:92px;right:-12px;top:-44px}.sign .arrow span{padding:9px 32px 9px 14px}}

/* the lobby: live games are lit placards, the open seats are unlit signs */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tile{position:relative;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--panel);text-decoration:none;color:var(--ink);min-width:0;
  border:3px solid var(--acc,var(--gold));box-shadow:0 0 0 2px rgba(0,0,0,.6),0 0 22px color-mix(in srgb,var(--acc,var(--gold)) 35%,transparent);transition:transform .15s ease,box-shadow .2s ease}
.tile .art{display:block;aspect-ratio:16/10;background:#000 center/cover no-repeat;max-width:100%;border-bottom:3px solid var(--acc,var(--gold))}
.tile .body{display:flex;flex-direction:column;gap:4px;padding:16px 18px 18px;flex:1}
.tile .tag{align-self:flex-start;padding:4px 10px;border-radius:999px;font:400 11px/1 Bungee,Impact,sans-serif;letter-spacing:.08em;color:#120c05;background:var(--acc,var(--gold))}
.tile b{font:400 1.55rem/1.1 Bungee,Impact,sans-serif;margin-top:6px;color:#fff;text-shadow:0 0 12px color-mix(in srgb,var(--acc,var(--gold)) 55%,transparent)}
.tile small{color:var(--muted);font-size:.93rem;line-height:1.45}
.tile .go{margin-top:auto;padding-top:12px;font:400 13px Bungee,Impact,sans-serif;letter-spacing:.03em;color:var(--acc,var(--gold))}
.tile .go i{font-style:normal;transition:margin .15s ease}
.tile.live:hover{transform:translateY(-4px);box-shadow:0 0 0 2px rgba(0,0,0,.6),0 0 36px color-mix(in srgb,var(--acc) 70%,transparent),0 18px 40px rgba(0,0,0,.6)}
.tile.live:hover .go i{margin-left:6px}
.tile.soon{--acc:#5a3b40;border-color:#3a2a2e;box-shadow:none;background:linear-gradient(180deg,#140d12,#0d090c)}
.tile.soon .art{aspect-ratio:auto;height:96px;display:grid;place-items:center;font:400 54px/1 Georgia,serif;color:#4b3036;border-bottom:2px solid #2b1e22;background:repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 2px,transparent 2px 14px)}
.tile.soon .art.red{color:#5b2730}
.tile.soon b{font-size:1.1rem;color:#9b8a8e;text-shadow:none}
.tile.soon .tag{background:none;color:#8e6b72;border:1.5px solid #5a3b40}
.tile.soon:hover .art{color:var(--pink);text-shadow:0 0 10px var(--pink)}
@media (min-width:1000px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tiles.soonrow{margin-top:20px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.tile.soon .art.suit{font-family:Georgia,serif}
@media (max-width:999px) and (min-width:600px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:599px){.tiles,.tiles.soonrow{grid-template-columns:1fr}.tile.soon{flex-direction:row;align-items:center}.tile.soon .art{height:auto;width:76px;align-self:stretch;font-size:38px;border-bottom:0;border-right:2px solid #2b1e22}.tile.soon .body{padding:12px 14px}}

/* neon section titles */
.band{padding-top:48px;padding-bottom:10px;margin-top:36px;border-top:2px dashed rgba(255,210,63,.18)}
h2.neon{margin:0 0 8px;font:400 clamp(1.8rem,4.5vw,2.8rem)/1.1 Yellowtail,cursive;color:#ffe3ea;text-wrap:balance;
  text-shadow:0 0 4px #fff,0 0 10px var(--pink),0 0 24px var(--pink),0 0 44px rgba(255,61,127,.6)}
h2.neon.teal{color:#e9fffd;text-shadow:0 0 4px #fff,0 0 10px var(--teal),0 0 24px var(--teal),0 0 44px rgba(25,227,214,.6)}

/* leaderboards: lit scoreboards */
.boards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1099px) and (min-width:861px){.boards{grid-template-columns:repeat(2,1fr)}}
.board{background:#0c0910;border:3px solid var(--acc,var(--gold));border-radius:16px;padding:14px 16px;min-width:0;box-shadow:0 0 20px color-mix(in srgb,var(--acc,var(--gold)) 25%,transparent),inset 0 0 30px rgba(0,0,0,.6)}
.board h3{margin:0 0 2px;font:400 1.1rem Bungee,Impact,sans-serif}
.board h3 a{color:#fff;text-decoration:none}.board h3 a:hover{color:var(--acc)}
.board .k{font:600 12px Inter;color:var(--muted);margin-bottom:8px}
.board table{width:100%;border-collapse:collapse;font-size:.95rem}
.board td{padding:6px 4px;border-top:1px dashed rgba(255,214,140,.14)}
.board tr:first-child td{border-top:0}
.board td:first-child{color:var(--muted);width:26px;font:400 13px Bungee,Impact,sans-serif}
.board td:last-child{text-align:right;font:400 15px Bungee,Impact,sans-serif;color:var(--acc,var(--gold));text-shadow:0 0 8px color-mix(in srgb,var(--acc,var(--gold)) 60%,transparent)}
.board .all{display:inline-block;margin-top:8px;font:400 12px Bungee,Impact,sans-serif;color:var(--acc,var(--gold));text-decoration:none}
@media (max-width:860px){.boards{grid-template-columns:1fr}}

/* which game */
.scroll{overflow-x:auto;border-radius:14px;border:3px solid var(--gold2);box-shadow:0 0 22px rgba(255,184,28,.2)}
table.cmp{border-collapse:collapse;width:100%;min-width:640px;background:#0f0b12;font-size:.95rem}
table.cmp th,table.cmp td{padding:12px 14px;border-bottom:1px dashed rgba(255,214,140,.16);text-align:left;vertical-align:top}
table.cmp th{color:#120c05;font:400 12px Bungee,Impact,sans-serif;letter-spacing:.04em;background:var(--gold)}
table.cmp tr:last-child td{border-bottom:0}
table.cmp td:first-child a{font:400 14px Bungee,Impact,sans-serif;color:#fff;text-decoration:none}
.more{font-size:.92rem;color:var(--muted);margin-top:16px;line-height:1.9}

/* questions */
details{border:2px solid rgba(255,210,63,.25);border-radius:12px;background:#0f0b12;padding:0 20px;margin-bottom:10px}
summary{cursor:pointer;padding:14px 0;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--gold);font:400 20px/1 Bungee,Impact,sans-serif}
details[open] summary::after{content:"–"}
details p{color:var(--muted);margin:0;padding-bottom:16px}

/* footer */
.site-footer{border-top:3px solid var(--red2);margin-top:54px;padding:40px 0 30px;color:var(--muted);font-size:.92rem;background:linear-gradient(180deg,rgba(215,25,47,.08),transparent 60%)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.site-footer h4{color:var(--gold);margin:0 0 10px;font:400 .9rem Bungee,Impact,sans-serif;letter-spacing:.03em}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:6px}
.site-footer a{color:var(--muted);text-decoration:none}.site-footer a:hover{color:#fff}
.footer-bottom{margin-top:26px;padding-top:18px;border-top:1px dashed rgba(255,214,140,.16);font-size:.85rem}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.footer-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.star{animation:none}}
@media (max-width:430px){.nav{display:none}.sign .plate{white-space:normal;line-height:1.35}}

/* the H1 reads "Free Casino Games" for search; the neon "Free" on the sign is drawn outside it */
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tile img.art{width:100%;height:auto;object-fit:cover}

/* ---- topic pages: readable text in the same night-and-neon dress ---- */
.doc{max-width:800px;padding-top:34px;padding-bottom:40px}
.crumb{font-size:13px;color:var(--muted);margin:0 0 10px}
.crumb a{color:var(--muted);text-decoration:none}.crumb a:hover{color:var(--gold)}
.doc h1{margin:0 0 14px;font:400 clamp(2rem,5.5vw,3.1rem)/1.05 Bungee,Impact,sans-serif;text-wrap:balance;
  background:linear-gradient(180deg,#fff7cf 0%,#ffe066 50%,#ffad1f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #5b0612) drop-shadow(0 0 12px rgba(255,200,60,.35))}
.doc h2{margin:2em 0 .5em;font:400 clamp(1.25rem,3vw,1.6rem)/1.2 Bungee,Impact,sans-serif;color:#fff;text-shadow:0 0 12px rgba(255,61,127,.45)}
.doc h3{margin:1.6em 0 .4em;font:800 1.1rem Inter;color:var(--gold)}
.doc p{margin:0 0 1em}
.doc .lead{font-size:1.15rem;margin:0 0 1.2em}
.doc ul,.doc ol{padding-left:22px}.doc li{margin-bottom:8px}
.doc strong{color:#fff}
table.list{border-collapse:collapse;width:100%;font-size:.95rem;margin:12px 0 20px;background:#0f0b12;border:2px solid rgba(255,184,28,.55);border-radius:12px;overflow:hidden}
table.list th,table.list td{padding:10px 12px;border-bottom:1px dashed rgba(255,214,140,.16);text-align:left;vertical-align:top}
table.list th{color:#120c05;font:400 12px Bungee,Impact,sans-serif;letter-spacing:.03em;background:var(--gold)}
table.list.num td:last-child,table.list.num th:last-child{text-align:right;font-variant-numeric:tabular-nums}
table.list tr:last-child td{border-bottom:0}
@media (max-width:620px){table.list{display:block;overflow-x:auto;white-space:nowrap}}
.doc-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:34px 0;padding:18px 20px;background:linear-gradient(180deg,#2a0910,#16070b);border:3px solid var(--gold2);border-radius:16px;box-shadow:0 0 24px rgba(215,25,47,.35)}
.doc-cta a{display:inline-block;background:linear-gradient(180deg,#ffe066,#ffad1f);color:#2a1300;font:400 15px Bungee,Impact,sans-serif;text-decoration:none;padding:12px 20px;border-radius:12px;box-shadow:0 4px 0 #8a5a04}
.doc-cta span{color:var(--muted);font-size:.95rem}
.more{font-size:.92rem;color:var(--muted);margin-top:30px;line-height:1.9}
.learngrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.learncard{display:block;padding:16px 18px;border-radius:14px;background:#0f0b12;border:2px solid rgba(255,210,63,.25);text-decoration:none;color:var(--ink)}
.learncard b{display:block;font:400 1rem/1.25 Bungee,Impact,sans-serif;color:#fff;margin-bottom:4px}
.learncard span{color:var(--muted);font-size:.9rem}
.learncard:hover{border-color:var(--gold);box-shadow:0 0 18px rgba(255,210,63,.3)}
@media (max-width:860px){.learngrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.learngrid{grid-template-columns:1fr}}

/* the plain facts under the live games: what the site is, game by game (written for people and for AI answers alike) */
.about{margin:26px 0 6px;padding:20px 22px;border-radius:16px;background:#0f0b12;border:2px solid rgba(25,227,214,.28)}
.about p{margin:0 0 12px;color:var(--ink)}
.about .facts{margin:0 0 12px;padding-left:20px}
.about .facts li{margin-bottom:8px;color:var(--muted)}
.about .facts b{color:#fff}
.about .sub{margin:0}