/* Casino-specific layout. Shared header, footer and other pages keep style.css. */
html { scroll-behavior: smooth; }
.casino-main { --casino-muted: #a3beb0; --casino-line: #1c3e30; }
.casino-hero {
  min-height: 332px;
  padding: 34px 38px;
  display: flex;
  align-items: center;
  border: 1px solid #264b35;
  border-radius: 16px;
  overflow: hidden;
  background: #00150d url('../assets/casino/hero-v3.webp') right top / auto 115% no-repeat;
}
.casino-hero-copy { width: 57%; position: relative; z-index: 1; }
.casino-eyebrow { margin: 0 0 13px; color: #9cedb9; font-size: 11px; letter-spacing: 1.6px; font-weight: 700; line-height: 1.4; }
.casino-eyebrow > span { margin: 0 8px; color: #528668; }
.casino-hero h1 { font-size: clamp(36px, 4vw, 52px); line-height: .99; letter-spacing: -1.9px; }
.casino-hero h1 em { color: var(--gold); }
.casino-hero-description { color: #d5e5db; font-size: 14px; line-height: 1.6; margin: 18px 0 22px; }
.casino-hero-actions { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }
.casino-hero-actions .button { gap: 14px; padding: 13px 21px; font-size: 12px; }
.casino-hero-actions .button img { filter: brightness(0); }
.casino-secondary-link { font-size: 12px; font-weight: 600; padding: 10px 0; }
.casino-secondary-link:hover { color: var(--green); }
.casino-secondary-link > span { color: var(--green); margin-left: 7px; }
.casino-perks { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; padding: 19px 12px; border-bottom: 1px solid var(--casino-line); }
.casino-perks > span { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 11px; color: #bed1c5; }
.casino-perks img { width: 19px; height: 19px; object-fit: contain; filter: grayscale(1) brightness(1.4); }
.casino-catalog { margin-top: 24px; scroll-margin-top: 16px; position: relative; }
.casino-anchor { display: block; height: 0; scroll-margin-top: 20px; }
.casino-controls {
  position: sticky;
  top: 8px;
  z-index: 5;
  background: #041d13f7;
  border: 1px solid #274838;
  border-radius: 13px;
  padding: 14px;
  backdrop-filter: blur(14px);
  box-shadow: 0 7px 24px #0002;
}
.casino-control-row { display: flex; gap: 12px; align-items: center; }
.casino-search { flex: 1; min-width: 0; position: relative; display: flex; align-items: center; height: 46px; background: #00150f; border: 1px solid #2b4c3a; border-radius: 8px; }
.casino-search:focus-within { border-color: var(--green); box-shadow: 0 0 0 2px #00ed7122; }
.casino-search > img { flex: 0 0 19px; width: 19px; height: 19px; margin-left: 14px; opacity: .75; }
.casino-search input { min-width: 0; width: 100%; height: 100%; padding: 10px 44px 10px 11px; border: 0; border-radius: 8px; background: transparent; color: #fff; outline: none; font-size: 13px; }
.casino-search input::placeholder { color: #a4bcae; opacity: 1; }
.casino-search input::-webkit-search-cancel-button { display: none; }
#casino-clear-search { position: absolute; right: 3px; top: 3px; bottom: 3px; width: 37px; display: grid; place-items: center; background: transparent; border-radius: 5px; }
#casino-clear-search:hover { background: #143d28; }
.casino-sort { display: flex; align-items: center; gap: 9px; }
.casino-sort label { font-size: 11px; color: #9eb8aa; white-space: nowrap; }
.casino-sort select { min-width: 135px; height: 46px; padding: 9px 30px 9px 12px; border: 1px solid #2b4c3a; border-radius: 8px; background: #00150f; color: #e5efe8; font-size: 12px; }
.casino-categories { display: flex; gap: 7px; margin-top: 12px; overflow-x: auto; padding: 2px 1px 4px; scrollbar-width: thin; scrollbar-color: #28593c transparent; }
.casino-categories button { display: flex; align-items: center; gap: 8px; flex-shrink: 0; min-height: 41px; padding: 8px 13px; border: 1px solid #294839; border-radius: 7px; background: #0a271b; color: #c5d8cc; font-size: 11px; font-weight: 600; transition: border-color .15s, background .15s; }
.casino-categories button:hover { border-color: #65b680; background: #103922; }
.casino-categories button[aria-pressed='true'] { background: #0d4628; color: #c6ffda; border-color: #00d567; }
.casino-categories button img { width: 17px; height: 17px; object-fit: contain; filter: grayscale(1) brightness(1.4); }
.casino-category-count { min-width: 20px; padding: 2px 5px; border-radius: 4px; background: #0004; font-size: 10px; font-weight: 700; color: #c0d8c8; text-align: center; }
.casino-catalog-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 27px 0 18px; }
.casino-section-kicker { color: #83a994; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; margin: 0 0 7px; }
.casino-catalog-heading h2 { font-size: 26px; letter-spacing: -.6px; }
#casino-results { margin: 0 0 2px; color: var(--casino-muted); font-size: 11px; text-align: right; }
.casino-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 14px; }
.casino-game { border: 1px solid #234635; border-radius: 11px; background: #062117; min-width: 0; overflow: hidden; transition: border-color .18s, transform .18s, box-shadow .18s; }
.casino-game:hover, .casino-game:focus-within { border-color: #52a66e; box-shadow: 0 8px 22px #0003; }
.casino-game-cover { display: block; width: 100%; padding: 0; position: relative; aspect-ratio: 1.2; overflow: hidden; background: #032017; }
.casino-game-cover > img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.casino-game-cover:hover > img, .casino-game-cover:focus-visible > img { transform: scale(1.045); }
.casino-game-cover:focus-visible { outline-offset: -4px; z-index: 1; }
.casino-game-badge { position: absolute; left: 9px; top: 9px; display: block; padding: 4px 6px; border-radius: 4px; background: #00120bdc; color: #d8ece1; font-size: 8px; line-height: 1.2; font-weight: 700; letter-spacing: .3px; }
.casino-game-play { position: absolute; bottom: 11px; left: 50%; transform: translateX(-50%) translateY(5px); display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 13px; border-radius: 7px; background: var(--green); color: #002015; box-shadow: 0 4px 18px #00150b77; font-size: 11px; font-weight: 800; opacity: 0; transition: transform .18s, opacity .18s; white-space: nowrap; }
.casino-game-play img { width: 15px; height: 15px; filter: brightness(0); }
.casino-game-cover:hover .casino-game-play, .casino-game-cover:focus-visible .casino-game-play { opacity: 1; transform: translateX(-50%) translateY(0); }
.casino-game-info { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 9px 6px 9px 12px; min-height: 62px; }
.casino-game-info > div { min-width: 0; }
.casino-game-info h3 { margin: 0; font-size: 13px; line-height: 1.3; letter-spacing: -.1px; color: #eff9f2; }
.casino-game-info p { margin: 4px 0 0; font-size: 10px; color: #94b3a0; }
.casino-favourite { display: grid; place-items: center; align-self: stretch; flex: 0 0 36px; min-height: 38px; padding: 7px; border-radius: 7px; background: transparent; }
.casino-favourite:hover { background: #15422b; }
.casino-favourite img { width: 20px; height: 20px; }
.casino-empty { text-align: center; background: #041c12; border: 1px dashed #355c43; border-radius: 13px; padding: 46px 20px; }
.casino-empty > img { margin: 0 auto 18px; opacity: .7; }
.casino-empty h3 { margin: 0; font-size: 23px; letter-spacing: -.5px; }
.casino-empty p { color: var(--casino-muted); font-size: 13px; margin: 12px 0 20px; }
.casino-empty .button { font-size: 11px; min-height: 42px; }
.casino-welcome { min-height: 215px; padding: 28px 32px; border: 1px solid #286b3f; border-radius: 13px; margin-top: 30px; background: #00180e url('../assets/bonus.webp') right center / cover no-repeat; }
.casino-welcome > div { max-width: 62%; }
.casino-welcome h2 { font-size: 31px; line-height: 1.02; letter-spacing: -.8px; }
.casino-welcome p:not(.casino-eyebrow) { color: #d7e5dc; font-size: 12px; margin: 12px 0 16px; }
.casino-welcome .button { min-height: 40px; font-size: 11px; padding: 10px 16px; gap: 12px; }
.casino-welcome .button img { filter: brightness(0); }
.casino-next { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 22px; }
.casino-next > a { display: flex; align-items: center; gap: 13px; padding: 20px 16px; border: 1px solid #214834; border-radius: 10px; background: #062419; transition: border-color .2s, background .2s; }
.casino-next > a:hover { border-color: #5baf79; background: #0a301f; }
.casino-next > a > img:first-child { flex: 0 0 25px; width: 25px; height: 25px; object-fit: contain; }
.casino-next h2 { font-size: 14px; letter-spacing: -.2px; }
.casino-next p { color: #9ebaa8; font-size: 10px; margin: 5px 0 0; }
.casino-next-arrow { width: 18px; height: 18px; margin-left: auto; flex: 0 0 18px; }
.casino-note { color: #8eaa98; font-size: 10px; margin: 20px 0 0; text-align: center; }
.casino-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 30; max-width: min(390px,calc(100vw - 32px)); padding: 13px 18px; border: 1px solid #5ca777; border-radius: 10px; background: #123c25; box-shadow: 0 8px 30px #0008; color: #edfff2; text-align: center; font-size: 12px; }
.casino-game-dialog { width: min(670px,calc(100% - 32px)); padding: 0; max-height: calc(100svh - 40px); overflow: auto; border: 1px solid #41704f; border-radius: 15px; background: #052117; }
.casino-game-dialog::backdrop { background: #000c; backdrop-filter: blur(5px); }
.casino-dialog-layout { display: grid; grid-template-columns: 1fr 1.1fr; }
.casino-dialog-cover { width: 100%; height: 100%; min-height: 340px; object-fit: cover; }
.casino-dialog-copy { padding: 36px 24px 25px; }
.casino-dialog-copy h2 { font-size: 32px; line-height: 1.05; letter-spacing: -.8px; }
.casino-dialog-copy > p:not(.casino-eyebrow) { color: #c7dccd; font-size: 13px; line-height: 1.6; margin: 16px 0; }
.casino-dialog-copy .casino-dialog-note { color: #91b09c; font-size: 11px; padding-top: 13px; border-top: 1px solid #264c34; }
.casino-dialog-copy .button { width: 100%; min-height: 42px; font-size: 11px; }
.casino-dialog-back { display: block; width: 100%; margin-top: 9px; padding: 10px; background: transparent; color: #bad2c3; font-size: 12px; border-radius: 6px; }
.casino-dialog-back:hover { background: #0d3422; }
.casino-dialog-close { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #41624c; border-radius: 50%; background: #001b12ef; z-index: 2; }
.casino-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.casino-noscript { padding: 12px; border: 1px solid #375c41; font-size: 12px; color: #b8d0c0; border-radius: 8px; }
@media (max-width: 1000px) {
  .casino-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .casino-next { grid-template-columns: 1fr; }
  .casino-next > a { padding: 16px; }
}
@media (max-width: 760px) {
  .casino-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
  .casino-hero { min-height: 320px; padding: 28px; }
  .casino-hero-copy { width: 62%; }
  .casino-sort label { display: none; }
  .casino-hero-actions { gap: 12px; }
}
@media (max-width: 600px) {
  .casino-main { padding: 12px; }
  .casino-hero { min-height: 318px; padding: 24px 19px; background-position: 62% center; border-radius: 11px; }
  .casino-hero-copy { width: 70%; }
  .casino-hero .casino-eyebrow { font-size: 8px; letter-spacing: .8px; margin-bottom: 13px; }
  .casino-hero .casino-eyebrow > span { margin: 0 4px; }
  .casino-hero h1 { font-size: 35px; line-height: 1.01; letter-spacing: -1.25px; }
  .casino-hero-description { font-size: 11px; margin: 14px 0 17px; max-width: 210px; }
  .casino-hero-description br { display: none; }
  .casino-hero-actions { gap: 7px 12px; }
  .casino-hero-actions .button { min-height: 40px; font-size: 10px; padding: 11px 14px; gap: 10px; }
  .casino-secondary-link { font-size: 10px; padding: 8px 0; }
  .casino-perks { gap: 6px; padding: 14px 0; }
  .casino-perks > span { gap: 5px; font-size: 9px; }
  .casino-perks img { width: 15px; height: 15px; }
  .casino-catalog { margin-top: 18px; }
  .casino-controls { top: 5px; padding: 10px; border-radius: 10px; }
  .casino-control-row { gap: 7px; }
  .casino-search { height: 43px; }
  .casino-search > img { width: 16px; height: 16px; flex-basis: 16px; margin-left: 10px; }
  .casino-search input { font-size: 11px; padding-left: 7px; padding-right: 31px; }
  #casino-clear-search { width: 29px; }
  .casino-sort select { width: 96px; min-width: 96px; height: 43px; font-size: 11px; padding: 7px 20px 7px 8px; }
  .casino-categories { gap: 6px; margin-top: 9px; padding-bottom: 4px; }
  .casino-categories button { font-size: 10px; padding: 8px 10px; min-height: 39px; gap: 6px; }
  .casino-categories button img { width: 15px; height: 15px; }
  .casino-category-count { font-size: 9px; min-width: 17px; padding: 2px 4px; }
  .casino-catalog-heading { margin: 23px 0 14px; gap: 10px; }
  .casino-catalog-heading h2 { font-size: 23px; }
  .casino-section-kicker { font-size: 8px; margin-bottom: 6px; }
  #casino-results { font-size: 10px; }
  .casino-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
  .casino-game { border-radius: 9px; }
  .casino-game-cover { aspect-ratio: 1.15; }
  .casino-game-info { min-height: 64px; padding: 8px 4px 8px 10px; }
  .casino-game-info h3 { font-size: 12px; }
  .casino-game-info p { font-size: 9px; }
  .casino-game-badge { left: 7px; top: 7px; padding: 4px 5px; font-size: 7px; }
  .casino-favourite { flex-basis: 34px; min-height: 40px; }
  .casino-favourite img { width: 18px; height: 18px; }
  .casino-game-play { padding: 6px 10px; font-size: 10px; }
  .casino-empty { padding: 35px 14px; }
  .casino-empty h3 { font-size: 21px; }
  .casino-empty p { font-size: 12px; }
  .casino-welcome { margin-top: 24px; min-height: 210px; padding: 22px 18px; background-position: 61% center; border-radius: 10px; }
  .casino-welcome > div { max-width: 68%; }
  .casino-welcome .casino-eyebrow { font-size: 9px; margin-bottom: 10px; }
  .casino-welcome h2 { font-size: 26px; }
  .casino-welcome p:not(.casino-eyebrow) { font-size: 10px; max-width: 175px; margin: 10px 0 14px; }
  .casino-welcome .button { font-size: 9px; padding: 10px 12px; gap: 8px; min-height: 36px; }
  .casino-next { gap: 8px; margin-top: 17px; }
  .casino-next h2 { font-size: 13px; }
  .casino-next p { font-size: 10px; }
  .casino-note { font-size: 9px; line-height: 1.6; margin-top: 18px; }
  .casino-dialog-layout { grid-template-columns: 1fr; }
  .casino-dialog-cover { min-height: 0; height: 200px; object-position: center 35%; }
  .casino-dialog-copy { padding: 23px 21px 20px; }
  .casino-dialog-copy h2 { font-size: 28px; }
}
@media (max-width: 360px) {
  .casino-hero { padding: 22px 15px; }
  .casino-hero h1 { font-size: 31px; }
  .casino-hero-copy { width: 76%; }
  .casino-perks > span { font-size: 8px; gap: 4px; }
  .casino-perks img { width: 13px; height: 13px; }
  .casino-search input { font-size: 10px; }
  .casino-sort select { width: 86px; min-width: 86px; font-size: 10px; }
  .casino-game-info h3 { font-size: 11px; }
  .casino-favourite { flex-basis: 29px; padding: 5px; }
}
@media (hover: none) {
  .casino-game-play { opacity: 1; transform: translateX(-50%); background: #00190cdd; color: #f0fff5; border: 1px solid #83c19b66; }
  .casino-game-play img { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .casino-main *, .casino-game-dialog * { transition: none !important; }
  .casino-game-cover:hover > img, .casino-game-cover:focus-visible > img { transform: none; }
}

/* Search remains readable and avoids automatic input zoom on iOS. */
#casino-results { max-width: 52%; overflow-wrap: anywhere; }
.casino-catalog-heading > div { min-width: 0; }
.casino-dialog-copy .casino-eyebrow { color: #9cedb9; }
@media (max-width: 600px) {
  .casino-search input { font-size: 16px; }
  .casino-sort select { font-size: 16px; min-width: 112px; width: 112px; padding-right: 18px; }
}

html { scrollbar-gutter: stable; }
body:has(dialog[open]) { overflow: hidden; }
@media (max-width: 600px) {
  .casino-hero { background-size: cover; background-position: 62% center; }
}
@media (max-width: 600px) {
  .casino-welcome { background-size: auto 115%; background-position: calc(100% + 100px) center; }
}
@media (max-width: 360px) {
  .casino-search input::placeholder { font-size: 11px; }
}

/* Casino landing copy follows the existing lobby palette and spacing. */
.casino-copy { margin-top:40px; min-width:0; scroll-margin-top:96px; }
.casino-copy > h2 { color:var(--gold); line-height:1.3; margin:0 0 20px; font-size:clamp(21px,2.3vw,28px); }
.casino-copy h3 { font-size:18px; line-height:1.4; margin:0 0 12px; }
.casino-copy p,.casino-copy li { color:var(--muted); line-height:1.8; }
.casino-copy > p { max-width:920px; }
.casino-copy .button { margin-top:16px; }
.casino-copy a:not(.button) { color:var(--green); font-weight:700; }
.casino-copy a:not(.button):hover { color:var(--gold); }
.casino-copy-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin:24px 0; }
.casino-copy-grid article { min-width:0; padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); }
.casino-copy ul,.casino-copy ol { padding-left:24px; }
.casino-copy li { padding-left:4px; margin:12px 0; }
.casino-copy li strong { color:#fff; }
.casino-copy-offers { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:24px 0; }
.casino-copy-offers > div { min-width:0; padding:20px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); }
.casino-copy-offers span { display:block; color:var(--muted); font-size:12px; margin-bottom:8px; }
.casino-copy-offers strong { display:block; color:var(--gold); font-size:19px; }
.casino-copy .casino-copy-note { font-size:12px; border-left:2px solid var(--line); padding-left:14px; }
.casino-copy-faq details { padding:20px 0; border-bottom:1px solid var(--line); }
.casino-copy-faq summary { font-weight:700; line-height:1.6; }
.casino-copy-faq details p { max-width:920px; }
@media(max-width:800px) { .casino-copy-offers { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .casino-copy { margin-top:30px; } .casino-copy-grid { grid-template-columns:1fr; gap:16px; } .casino-copy-grid article { padding:20px; } .casino-copy-offers { gap:10px; } .casino-copy-offers > div { padding:16px; } .casino-copy-offers strong { font-size:16px; } }

.casino-direct-play { display:flex; justify-content:center; align-items:center; gap:10px; min-height:40px; margin:0 10px 12px; padding:10px 12px; border-radius:7px; background:var(--green); color:#001b10; font-size:12px; font-weight:800; text-align:center; }
.casino-direct-play:hover { background:#69ffa8; }
.casino-direct-play:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }