:root {
  color-scheme: light;
  --ink: #17211d;
  --muted: #66736d;
  --green-950: #071d16;
  --green-900: #0a2b20;
  --green-800: #104936;
  --green-700: #146348;
  --gold: #e6b94d;
  --gold-light: #f6dd93;
  --red: #b73745;
  --paper: #ffffff;
  --canvas: #f3f1eb;
  --line: #dfe4e0;
  --radius: 18px;
  --shadow: 0 24px 70px rgb(3 24 17 / 0.16);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; margin: 0; color: var(--ink); background: radial-gradient(circle at 10% 0, rgb(230 185 77 / .12), transparent 30rem), var(--green-950); font-size: 16px; line-height: 1.65; text-align: left; }
a { color: var(--green-700); text-decoration: none; }
a:hover { color: var(--green-800); }
img { max-width: 100%; }
.wrapper { width: min(1180px, calc(100% - 32px)); margin: 24px auto; overflow: hidden; border: 1px solid rgb(255 255 255 / .09); border-radius: 26px; background: var(--paper); box-shadow: var(--shadow); text-align: left; }
.site-header { display: flex; align-items: center; justify-content: space-between; min-height: 96px; padding: 20px 34px; color: #fff; background: var(--green-900); }
.logo { display: inline-flex; align-items: center; gap: 14px; width: auto; height: auto; color: #fff; background: none; }
.logo:hover { color: #fff; text-decoration: none; }
.logo-mark { display: grid; width: 52px; height: 60px; place-items: center; border: 2px solid rgb(255 255 255 / .78); border-radius: 9px; color: var(--red); background: #fff; box-shadow: 6px 6px 0 var(--gold); font-family: Georgia, serif; font-size: 1.45rem; font-weight: 800; transform: rotate(-4deg); }
.logo-copy { display: grid; line-height: 1.15; }
.logo-copy strong { color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -.02em; }
.logo-copy small { margin-top: 6px; color: rgb(255 255 255 / .62); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.header-cta { padding: 11px 17px; border: 1px solid rgb(255 255 255 / .24); border-radius: 999px; color: #fff; font-size: .86rem; font-weight: 800; }
.header-cta:hover { border-color: var(--gold); color: var(--gold-light); }
.nav-wrap { border: 0; }
.nav-toggle { display: none; }
.nav { height: auto; padding: 0 24px; overflow: visible; background: #fff; border-bottom: 1px solid var(--line); }
#nav { display: flex; width: 100%; height: auto; margin: 0; padding: 0; float: none; list-style: none; background: none; }
#nav li, #nav li.vpc { flex: 1 1 auto; padding: 0; border: 0; }
.nav-section-title { display: none; }
#nav li a, #nav li a.jacks, #nav li a.tens, #nav li a.doubledownstud, #nav li a.jokerswild, #nav li a.deuces, #nav li a.contactvpc { display: flex; width: auto; height: 54px; align-items: center; justify-content: center; padding: 0 14px; color: #435049; background: none; font-size: .78rem; font-weight: 800; letter-spacing: .025em; white-space: nowrap; }
#nav li a:hover { color: var(--green-700); background: #f4f8f5; text-decoration: none; }
#nav li span { display: inline; }
.banner { position: relative; display: grid; min-height: 320px; grid-template-columns: minmax(0, 1fr) 350px; align-items: center; gap: 40px; overflow: hidden; padding: 52px 64px; color: #fff; background: var(--green-800) url("images/poker-background.webp") center / cover no-repeat; }
.banner::before { position: absolute; width: 420px; height: 420px; right: -120px; top: -190px; border: 1px solid rgb(255 255 255 / .12); border-radius: 50%; box-shadow: 0 0 0 55px rgb(255 255 255 / .025), 0 0 0 110px rgb(255 255 255 / .018); content: ""; }
.hero-copy { position: relative; z-index: 1; max-width: 650px; }
.hero-kicker, .section-kicker, .sidebar-eyebrow { margin: 0 0 10px; color: var(--gold-light); font-size: .72rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.hero-copy h1 { max-width: 650px; margin: 0 0 16px; color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.25rem, 5vw, 4.35rem); font-weight: 500; letter-spacing: -.045em; line-height: .98; }
.hero-copy > p:not(.hero-kicker) { max-width: 580px; margin: 0; color: rgb(255 255 255 / .78); font-size: 1.05rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-actions a, .playnow, .playonline { display: inline-flex; width: auto; height: auto; align-items: center; justify-content: center; margin: 0; padding: 13px 19px; overflow: visible; border-radius: 9px; text-indent: 0; background: var(--gold); color: var(--green-950); font-size: .85rem; font-weight: 900; }
.hero-actions .playonline { border: 1px solid rgb(255 255 255 / .3); color: #fff; background: transparent; }
.hero-actions a:hover { color: var(--green-950); background: var(--gold-light); text-decoration: none; }
.hero-actions .playonline:hover { color: #fff; background: rgb(255 255 255 / .1); }
.hero-cards { position: relative; z-index: 1; display: grid; height: 230px; place-items: center; }
.hero-cards img { display: block; width: min(100%, 350px); height: auto; }
.hero-cards .card { position: absolute; display: flex; width: 142px; height: 202px; align-items: flex-start; justify-content: flex-start; padding: 16px; border-radius: 13px; color: var(--ink); background: #fff; box-shadow: 0 20px 45px rgb(0 0 0 / .25); font-family: Georgia, serif; font-size: 2.2rem; font-weight: 800; line-height: .8; }
.hero-cards .card small { display: block; color: var(--red); font-size: 1.4rem; }
.card-one { left: 15px; top: 20px; transform: rotate(-13deg); }
.card-two { left: 105px; top: 2px; transform: rotate(2deg); }
.card-three { left: 195px; top: 22px; transform: rotate(14deg); }
.content { display: grid; grid-template-columns: 250px minmax(0, 1fr); color: var(--ink); background: var(--paper); }
.left_sider { width: auto; min-width: 0; float: none; padding: 34px 24px; border-right: 1px solid var(--line); background: #f6f7f4; }
.sidebar { width: auto; padding: 0; color: var(--ink); }
.game-group + .game-group { margin-top: 30px; }
.sidebar-eyebrow { color: var(--green-700); }
.single, .multi { width: auto; height: auto; margin: 0 0 11px; overflow: visible; color: var(--ink); background: none; font-size: .75rem; font-weight: 900; letter-spacing: .08em; line-height: 1.2; text-indent: 0; text-transform: uppercase; }
.side-links { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.side-links a { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 9px; color: #38443e; }
.side-links a:hover { color: var(--green-800); background: #fff; box-shadow: 0 5px 18px rgb(14 52 39 / .07); text-decoration: none; transform: translateX(2px); }
.side-links span { font-size: .88rem; font-weight: 800; }
.side-links small { margin-top: 1px; color: #85908b; font-size: .7rem; }
.sidebar-note { margin-top: 32px; padding: 20px; border-radius: 14px; color: #fff; background: var(--green-900); }
.note-icon { color: var(--gold); font-size: 1.3rem; }
.sidebar-note h2 { margin: 7px 0 5px; color: #fff; font-family: Georgia, serif; font-size: 1.15rem; }
.sidebar-note p { margin: 0 0 12px; color: rgb(255 255 255 / .66); font-size: .78rem; line-height: 1.55; }
.sidebar-note .bar_link { display: inline; padding: 0; color: var(--gold-light); font-size: .76rem; line-height: normal; }
.main { width: auto; min-width: 0; float: none; padding: 0; }
.main_top { padding: 0; }
.main_left { min-width: 0; padding: 44px clamp(24px, 5vw, 62px) 58px; }
.main_left > h1, .welcome-block h1 { margin: 0 0 18px; color: var(--green-900); font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 4vw, 3.35rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.05; }
.main_left > h1 img { width: auto; max-height: 55px; }
.main_left h2 { margin: 38px 0 13px; color: var(--green-900); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.45rem, 3vw, 2.2rem); font-weight: 500; line-height: 1.15; }
.main_left p { max-width: 76ch; margin: 0 0 18px; padding: 0; color: #4f5b55; }
.main_left ul { margin: 22px 0; padding: 18px 22px 18px 42px; border-left: 4px solid var(--gold); background: #fbf8ee; }
.main_left li + li { margin-top: 7px; }
.main_left a { font-weight: 700; text-decoration: underline; text-decoration-color: rgb(20 99 72 / .28); text-underline-offset: 3px; }
.main_left a:hover { text-decoration-color: currentColor; }
/* Games: responsive HTML5 game shell replacing the old table-based layout. The five-card
   hand is a true CSS grid (1fr columns) sized off the game panel itself, never the
   viewport, so it cannot overflow into a wrapped second row at any width. */
.game-context { display: flex; align-items: center; gap: 8px; max-width: 620px; margin: -18px auto 14px; color: #7b8781; font-size: .72rem; font-weight: 800; }
.game-context a { color: var(--green-700); text-decoration: none; }
.game-context-note { margin-left: auto; color: #8b958f; font-weight: 700; }
.vpc-game { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 14px; max-width: 500px; margin: 0 auto 30px; padding: 24px 28px 28px; overflow: hidden; border: 1px solid #315d4d; border-radius: 20px; background: radial-gradient(circle at 50% -20%, rgb(42 126 91 / .55), transparent 55%), linear-gradient(145deg, #0c3024, #071d16); box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 22px 50px rgb(7 29 22 / .18); color: #fff; }
.vpc-game::before { position: absolute; z-index: -1; inset: 0; opacity: .18; background-image: radial-gradient(rgb(255 255 255 / .35) .6px, transparent .7px); background-size: 7px 7px; content: ""; pointer-events: none; }
.vpc-game--triple { max-width: 620px; }
.vpc-title { margin: 0; text-align: center; font-size: 1rem; }
.vpc-title a { display: inline-block; padding: 10px 22px; border-radius: 8px; background: var(--gold); color: var(--green-950); font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; font-weight: 800; letter-spacing: .02em; text-decoration: none; }
.vpc-title a:hover { background: var(--gold-light); color: var(--green-950); text-decoration: none; }
.vpc-status { margin: 0; }
.vpc-status input { display: block; width: 100%; min-height: 29px; padding: 5px 7px; border: 1px solid rgb(255 255 255 / .28); border-radius: 5px; color: #e8fff5; background: rgb(0 0 0 / .27); font: 700 .75rem Consolas, monospace; text-align: center; }
.vpc-hand-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.vpc-hand-row.is-active { padding: 8px; border: 1px solid rgb(230 185 77 / .35); border-radius: 10px; background: rgb(230 185 77 / .07); }
.vpc-hand { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); min-width: 0; gap: 6px; }
.vpc-hand-row .vpc-hand { flex: 1 1 260px; }
.vpc-card-slot { display: flex; flex-direction: column; min-width: 0; gap: 6px; }
.vpc-card { display: block; width: 100%; min-width: 0; padding: 0; border: 0; border-radius: 8px; background: #fff; box-shadow: 0 4px 10px rgb(0 0 0 / .25); line-height: 0; transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease; }
button.vpc-card { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.vpc-card:hover { filter: brightness(1.12); }
button.vpc-card.is-held { transform: translateY(-5px); box-shadow: 0 0 0 3px var(--gold), 0 9px 16px rgb(0 0 0 / .3); }
.vpc-game.is-choosing button.vpc-card:not(.is-held) { opacity: .62; }
button.vpc-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.vpc-card img { display: block; width: 100%; height: auto; }
.vpc-hand-bet { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; gap: 4px; font-size: .66rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: #d8f0e3; }
.vpc-hand-bet input { width: 3.6em; min-height: 29px; padding: 5px 6px; border: 1px solid rgb(255 255 255 / .28); border-radius: 5px; color: #e8fff5; background: rgb(0 0 0 / .27); font: 700 .75rem Consolas, monospace; text-align: center; }
.vpc-card-slot .vpc-btn { width: 100%; min-width: 0; min-height: 36px; padding: 6px 2px; font-size: .62rem; }
.vpc-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.vpc-field { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .66rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: #d8f0e3; }
.vpc-field input { width: 4.5em; min-height: 29px; padding: 5px 6px; border: 1px solid rgb(255 255 255 / .28); border-radius: 5px; color: #e8fff5; background: rgb(0 0 0 / .27); font: 700 .75rem Consolas, monospace; text-align: center; }
.vpc-btn { min-height: 44px; padding: 8px 14px; border: 1px solid #f2d782; border-radius: 6px; color: var(--green-950); background: linear-gradient(#f8e3a2, var(--gold)); box-shadow: 0 3px 0 #9d741b; font: inherit; font-size: .72rem; font-weight: 900; letter-spacing: .02em; line-height: 1.15; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vpc-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.vpc-btn:active { box-shadow: 0 1px 0 #9d741b; transform: translateY(2px); }
.vpc-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.vpc-btn:disabled { filter: grayscale(.4); opacity: .5; box-shadow: none; transform: none; cursor: not-allowed; }
.vpc-btn--deal { background: linear-gradient(#fff0b8, #f0c25a); box-shadow: 0 4px 0 #9d741b, 0 8px 20px rgb(0 0 0 / .18); }
.main_left .paytable { width: 100%; max-width: 460px; margin: 24px auto; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; scroll-margin-top: 20px; }
.main_left .paytable--triple { max-width: 620px; }
.main_left .paytable td, .main_left .paytable th { padding: 11px 13px; border: 1px solid var(--line); color: #45524c; font-size: .82rem; }
.main_left .paytable tr:first-child td { color: #fff; background: var(--green-800) !important; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; text-align: center; }
.vpc-held-badge { display: none; }
.vpc-hint { display: none; }
.vpc-hand-label { display: none; }
.vpc-paytable-wrap { border: 0; margin: 0; }
.vpc-paytable-wrap > summary { display: none; }

/* Mobile gameplay layout: cards double as hold/discard controls, the pay table
   collapses, and betting controls compress into a small dominant-action bar.
   Desktop (above this breakpoint) keeps the classic layout untouched. */
@media (max-width: 600px) {
  .vpc-card-slot .vpc-btn { display: none; }
  .vpc-card { position: relative; }
  button.vpc-card.is-held .vpc-held-badge { display: block; margin-top: 4px; padding: 4px 0; border-radius: 4px; background: var(--gold); color: var(--green-950); font-size: .56rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; text-align: center; line-height: 1.3; }
  .vpc-hand { align-items: start; gap: 8px; }
  .vpc-hand-row { align-items: stretch; }

  .vpc-hint { display: block; margin: 0; padding: 8px 10px; border-radius: 8px; background: rgb(255 255 255 / .06); color: #d8f0e3; font-size: .74rem; font-weight: 700; text-align: center; }

  .vpc-hand-label { display: block; margin: 0 0 -6px; font-size: .68rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #9fc4ac; text-align: center; }
  .vpc-hand-label--active { color: var(--gold-light); }

  /* Only t8 (or the per-hand result fields) stay visible; the two "click cards /
     click deal" instruction rows are replaced by the single .vpc-hint line above. */
  #vpc-game .vpc-status:has(input[name="t9"]),
  #vpc-game .vpc-status:has(input[name="u1"]) { display: none; }

  .vpc-status input { min-height: 34px; font-size: .78rem; }

  /* Bet/Coins readout above a Bet One / Bet Max / Deal row; Deal is the visually
     dominant action. Targets existing field names, no markup changes required. */
  .vpc-controls { position: sticky; z-index: 8; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "bet coins" "betone betmax" "deal deal"; gap: 8px 10px; margin: 4px -8px -10px; padding: 10px 8px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid rgb(255 255 255 / .12); border-radius: 12px; background: rgb(7 29 22 / .96); box-shadow: 0 -12px 28px rgb(0 0 0 / .18); backdrop-filter: blur(10px); }
  .vpc-controls:has([name="bl"]) { grid-template-columns: repeat(4, 1fr); grid-template-areas: "unbet betone bet3 betmax" "coins coins coins coins" "deal deal deal deal"; }
  .vpc-controls:has([name="double"]) { grid-template-columns: 1fr; grid-template-areas: "double"; }
  .vpc-controls [name="double"] { grid-area: double; min-height: 52px; font-size: .9rem; }
  .vpc-controls .vpc-field:has(input[name="bt"]) { grid-area: bet; }
  .vpc-controls .vpc-field:has(input[name="ts"]) { grid-area: coins; }
  .vpc-controls:has([name="bl"]) .vpc-field:has(input[name="ts"]) { flex-direction: row; justify-content: center; gap: 8px; }
  .vpc-controls [name="bl"] { grid-area: unbet; }
  .vpc-controls [name="bo"] { grid-area: betone; }
  .vpc-controls [name="b3"] { grid-area: bet3; }
  .vpc-controls [name="bx"] { grid-area: betmax; }
  .vpc-controls [name="draw"] { grid-area: deal; min-height: 56px; font-size: 1rem; }
  .vpc-field, .vpc-controls .vpc-btn { width: 100%; }
  .vpc-field input { width: 100%; font-size: .9rem; }

  .vpc-paytable-wrap[open] { display: block; }
  .vpc-paytable-wrap > summary, .vpc-paytable-wrap[open] > summary { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px; margin: 24px 0 0; border-radius: 10px; background: var(--green-800); color: #fff; font-weight: 900; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; list-style: none; }
  .vpc-paytable-wrap > summary::-webkit-details-marker { display: none; }
  .vpc-paytable-wrap > summary::after { content: "\25BE"; transition: transform .15s ease; }
  .vpc-paytable-wrap[open] > summary::after { transform: rotate(180deg); }
  .vpc-paytable-wrap .paytable { margin-top: 10px; }
}
/* Modern homepage */
.welcome-block { padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.section-kicker { color: var(--green-700); }
.lead { max-width: 720px !important; color: #56635d !important; font-size: clamp(1rem, 2vw, 1.2rem); }
.featured-games { padding-top: 38px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.section-heading h2 { margin: 0; }
.section-heading > a { font-size: .82rem; }
.game-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.game-tile { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 14px; min-height: 92px; padding: 15px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: #fff; box-shadow: 0 5px 20px rgb(10 43 32 / .04); text-decoration: none !important; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.game-tile:hover { border-color: #a7c0b5; color: var(--ink); box-shadow: 0 14px 30px rgb(10 43 32 / .1); transform: translateY(-2px); }
.tile-suit { display: grid; width: 54px; height: 62px; place-items: center; border: 1px solid #d7dcd8; border-radius: 8px; background: #fafafa; box-shadow: 3px 3px 0 #e7e9e6; font-family: Georgia, serif; font-size: 1.25rem; font-weight: 800; }
.tile-suit.red { color: var(--red); }
.tile-suit.black { color: #18201c; }
.game-tile > span:nth-child(2) { display: grid; }
.game-tile strong { font-size: .92rem; }
.game-tile small { margin-top: 3px; color: #7a8580; font-size: .72rem; }
.game-tile b { color: var(--green-700); }
.triple-promo { display: grid; grid-template-columns: 1fr 220px; align-items: center; gap: 20px; margin-top: 42px; padding: 34px; overflow: hidden; border-radius: 16px; color: #fff; background: var(--green-900); }
.triple-promo h2 { margin: 0 0 8px; color: #fff; }
.triple-promo p:not(.section-kicker) { margin-bottom: 20px; color: rgb(255 255 255 / .67); }
.triple-promo .section-kicker { color: var(--gold-light); }
.button-light { display: inline-flex; padding: 11px 15px; border-radius: 8px; color: var(--green-950) !important; background: var(--gold); text-decoration: none !important; }
.button-light:hover { background: var(--gold-light); }
.mini-hand { display: grid; min-height: 130px; place-items: center; }
.mini-hand img { display: block; width: min(100%, 220px); height: auto; }
/* Footer */
.site-footer { display: grid; grid-template-columns: 1fr auto; gap: 22px 40px; padding: 34px; color: rgb(255 255 255 / .66); background: var(--green-950); font-size: .78rem; }
.footer-brand { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-family: Georgia, serif; font-size: 1.1rem; font-weight: 700; }
.footer-brand span { color: var(--gold); }
.site-footer p { margin: 6px 0 0; }
.site-footer nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 17px; }
.site-footer nav a { color: rgb(255 255 255 / .72); font-weight: 700; }
.site-footer nav a:hover { color: var(--gold-light); }
.copyright { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / .1); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (max-width: 900px) {
  .wrapper { width: min(100% - 20px, 760px); margin-block: 10px; border-radius: 20px; }
  .banner { grid-template-columns: 1fr 260px; padding: 44px 38px; }
  .hero-cards { transform: scale(.8); transform-origin: center; }
  .content { grid-template-columns: 1fr; }
  .left_sider { border-right: 0; border-bottom: 1px solid var(--line); padding: 25px; }
  .sidebar { display: grid; grid-template-columns: 1fr 1fr 220px; gap: 24px; align-items: start; }
  .game-group + .game-group, .sidebar-note { margin-top: 0; }
  .main_left { padding: 40px clamp(22px, 6vw, 48px) 52px; }
}
@media (max-width: 900px) {
  .site-header { min-height: 82px; padding: 16px 20px; }
  .logo-mark { width: 42px; height: 49px; font-size: 1.1rem; box-shadow: 4px 4px 0 var(--gold); }
  .logo-copy small { display: none; }
  .header-cta { display: none; }

  /* Top nav becomes a collapsible menu instead of a horizontally-scrolling
     strip. Collapsed by default on load (see the inline script beside it in
     header.php); native <details> handles the open/close toggle itself. */
  .nav-wrap { position: relative; z-index: 30; }
  .nav-toggle { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; color: var(--green-900); background: #fff; border-bottom: 1px solid var(--line); font-size: .82rem; font-weight: 800; letter-spacing: .02em; cursor: pointer; list-style: none; }
  .nav-toggle::-webkit-details-marker { display: none; }
  .nav-toggle-icon { position: relative; width: 18px; height: 13px; flex: none; }
  .nav-toggle-icon::before, .nav-toggle-icon::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .15s ease; }
  .nav-toggle-icon::before { top: 0; box-shadow: 0 5.5px 0 currentColor; }
  .nav-toggle-icon::after { bottom: 0; }
  .nav-wrap[open] > .nav-toggle .nav-toggle-icon::before { transform: translateY(5.5px) rotate(45deg); box-shadow: none; }
  .nav-wrap[open] > .nav-toggle .nav-toggle-icon::after { transform: translateY(-5.5px) rotate(-45deg); }
  .nav { position: absolute; top: 100%; right: 0; left: 0; padding: 10px; border-bottom: 1px solid var(--line); background: #fff; box-shadow: 0 18px 35px rgb(7 29 22 / .2); }
  #nav { display: grid; width: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  #nav li { display: block; float: none; width: auto; padding: 0; border: 0; }
  #nav .nav-section-title { display: block; grid-column: 1 / -1; padding: 8px 10px 3px; color: var(--green-700); font-size: .64rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
  #nav .nav-utility { grid-column: 1 / -1; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
  #nav li a, #nav li a.jacks, #nav li a.tens, #nav li a.doubledownstud, #nav li a.jokerswild, #nav li a.deuces, #nav li a.contactvpc { height: auto; min-height: 48px; justify-content: flex-start; padding: 8px 10px; border-radius: 8px; white-space: normal; line-height: 1.25; }
  #nav li a:hover { background: #f4f8f5; }

  .banner { min-height: 0; grid-template-columns: 1fr; padding: 38px 25px; }
  .hero-cards { display: none; }
  .hero-copy h1 { font-size: clamp(2.15rem, 11vw, 3.35rem); }
  /* Game pages: nothing should sit between the collapsed menu and the game
     itself, so the marketing hero is skipped and the game panel (inside
     .main) is reordered ahead of the sidebar game list. */
  .wrapper.is-game .banner { display: none; }
  .wrapper.is-game .content { display: flex; flex-direction: column; }
  .wrapper.is-game .main { order: -1; }
  .wrapper.is-game .left_sider { order: 1; }

  .sidebar { grid-template-columns: 1fr 1fr; }
  .sidebar-note { grid-column: 1 / -1; }
  .game-cards { grid-template-columns: 1fr; }
  .triple-promo { grid-template-columns: 1fr; }
  .mini-hand { display: none; }
  .site-footer { grid-template-columns: 1fr; }
  .site-footer nav { justify-content: flex-start; }
  .copyright { grid-column: 1; }
}
@media (max-width: 480px) {
  .wrapper { width: 100%; margin: 0; border: 0; border-radius: 0; }
  .logo-copy strong { font-size: 1.35rem; }
  .hero-actions { display: grid; }
  .hero-actions a { width: 100%; }
  .left_sider { padding: 24px 18px; }
  .sidebar { grid-template-columns: 1fr; }
  .sidebar-note { grid-column: auto; }
  .main_left { padding: 22px 12px 44px; }
  .game-context { margin: 0 4px 10px; }
  .game-context-note { font-size: .66rem; }
  .vpc-game { margin-inline: 0; padding: 16px 10px 14px; border-radius: 16px; }
  .vpc-title a { padding: 8px 16px; font-size: 1rem; }
  .vpc-hand { gap: 5px; }
  .vpc-hand-row { flex-direction: column; align-items: stretch; }
  .vpc-hand-row .vpc-hand { flex: none; }
  .vpc-hand-bet { flex-direction: row; justify-content: center; }
  .main_left .paytable { display: block; overflow-x: auto; }
  .section-heading { align-items: start; flex-direction: column; }
  .triple-promo { padding: 26px 22px; }
  .site-footer { padding: 28px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
@media print {
  body { color: #000; background: #fff; }
  .wrapper { width: 100%; margin: 0; border: 0; box-shadow: none; }
  .nav, .banner, .left_sider, .site-footer { display: none; }
  .content { display: block; }
}