/* ==========================================================
   District 4 — Cauliflower Casino
   Art direction: docs/aaa-experience/03-ART-DIRECTION.md §4

   Luxury vegetable-mafia Art Deco. Black and cream, brass rules, emerald
   felt; gold reserved for outcomes. The signature motif is the cauliflower
   floret fan — one SVG symbol reused as floor inlay, card ornament, divider
   and settlement burst.

   The anti-goal: if any frame here could be mistaken for an offshore
   gambling site, this district has failed. No flashing multi-hue borders,
   no coin showers, no MEGA WIN type, no countdown pressure.
   ========================================================== */

/* ── The floor ──────────────────────────────────────────────────────── */

.cas-floor {
  position: absolute;
  inset: 0;
  background:
    /* chandelier */
    radial-gradient(50% 34% at 50% -6%, hsla(45,80%,60%,0.10), transparent 62%),
    /* marble field */
    linear-gradient(160deg, hsl(160 22% 6%) 0%, hsl(258 30% 4%) 46%, hsl(160 20% 5%) 100%);
}
/* Deco floor banding: brass rules, not a grid. */
.cas-floor::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40vh;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 78px,
      color-mix(in srgb, var(--aaa-light) 16%, transparent) 78px 79px);
  -webkit-mask-image: linear-gradient(0deg, #000, transparent 84%);
          mask-image: linear-gradient(0deg, #000, transparent 84%);
  opacity: 0.55;
}
.aaa-q-lite .cas-floor::after { display: none; }

/* ── The house plate ────────────────────────────────────────────────── */

.cas-head { padding: clamp(0.5rem, 2vw, 1rem) 0 0; text-align: center; }
.cas-head .aaa-marquee { margin-inline: auto; }
.cas-head .aaa-lede { margin-inline: auto; text-align: center; max-width: 60ch; }

/* The deed: who owns the building, engraved. */
.cas-deed {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: var(--aaa-gap);
  padding: 0.55rem 1rem 0.55rem 0.55rem;
  border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--aaa-cc) 30%, transparent);
  background: linear-gradient(180deg, hsla(45,60%,50%,0.07), transparent);
  text-align: left;
}
.cas-deed img {
  width: 42px;
  height: 42px;
  border-radius: 3px;
  object-fit: cover;
  object-position: top center;
  background: hsl(160 22% 8%);
}
.cas-deed .k {
  display: block;
  font-family: var(--font-display);
  font-size: 0.52rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--aaa-ink-3);
}
.cas-deed .v { display: block; font-size: 0.86rem; color: var(--aaa-ink-2); margin-top: 0.1rem; }
.cas-deed .v b { color: var(--aaa-cc); font-weight: 700; }

/* ── Responsible play, engraved into the architecture ───────────────── */

.cas-band {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  align-items: center;
  justify-content: center;
  margin: var(--aaa-gap) 0 0;
  padding: 0.7rem 1rem;
  border-block: 1px solid color-mix(in srgb, var(--aaa-cc) 22%, transparent);
  font-size: 0.8rem;
  color: var(--aaa-ink-2);
  text-align: center;
}
.cas-band b { color: var(--aaa-ink-1); font-weight: 600; }

/* ── Purse ──────────────────────────────────────────────────────────── */

.cas-purse {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: var(--aaa-gap);
  min-height: 42px;
}

/* ── Doorways: the five houses ──────────────────────────────────────── */

/* Cream leads the type in this district; emerald is the room and gold is
   reserved for outcomes. That split is what keeps the Deco from reading as
   casino-green. */
.aaa-d-casino .aaa-marquee em { color: hsl(45 44% 92%); }

.cas-doors {
  display: grid;
  gap: var(--aaa-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 198px), 1fr));
}

.cas-door {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  /* A Deco arch: flat shoulders, stepped crown. */
  border-radius: 46% 46% 8px 8px / 22% 22% 8px 8px;
  border: 1px solid color-mix(in srgb, var(--aaa-cc) 26%, transparent);
  background:
    radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--aaa-light) 20%, transparent), transparent 62%),
    linear-gradient(180deg, hsl(160 20% 8%), hsl(258 28% 5%));
  min-height: 300px;
  isolation: isolate;
  transition: border-color var(--aaa-t-quick) var(--aaa-e-settle),
              transform var(--aaa-t-move) var(--aaa-e-settle),
              box-shadow var(--aaa-t-move) var(--aaa-e-settle);
}
.aaa-q-standard .cas-door:hover,
.aaa-q-enhanced .cas-door:hover { box-shadow: 0 14px 40px rgba(0,0,0,0.6), 0 0 30px color-mix(in srgb, var(--aaa-cc) 22%, transparent); }
.cas-door:focus-visible { outline: 2px solid var(--aaa-cc); outline-offset: 3px; }
.aaa-q-standard .cas-door:hover,
.aaa-q-enhanced .cas-door:hover { border-color: color-mix(in srgb, var(--aaa-cc) 62%, transparent); transform: translate3d(0, -3px, 0); }
@media (prefers-reduced-motion: reduce) { .cas-door { transition: none; } .cas-door:hover { transform: none; } }

/* ── The painted poster: the table's real art, full saturation ─────────
   Five paintings, each with its own colour identity, inside the Deco arch.
   The Deco system is the frame now, never the content. */
.cas-door-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  transition: transform var(--aaa-t-open) var(--aaa-e-settle);
}
/* The veil exists ONLY where text sits. The painting stays at 100%. */
.cas-door-veil {
  position: absolute;
  inset: 40% 0 0 0;
  background: linear-gradient(180deg, transparent, hsla(160,30%,3%,0.86) 52%, hsla(160,30%,3%,0.96));
  pointer-events: none;
}
.aaa-q-standard .cas-door:hover .cas-door-art,
.aaa-q-enhanced .cas-door:hover .cas-door-art { transform: scale(1.045); }

/* The floret fan becomes the crown ornament over the arch. */
.cas-door-fan {
  position: absolute;
  top: 2%;
  left: 50%;
  width: min(46%, 104px);
  transform: translateX(-50%);
  opacity: 0.5;
  pointer-events: none;
  color: var(--aaa-cc);
  filter: drop-shadow(0 1px 6px rgba(0,0,0,0.8));
  transition: opacity var(--aaa-t-quick) var(--aaa-e-settle);
}
.aaa-q-standard .cas-door:hover .cas-door-fan,
.aaa-q-enhanced .cas-door:hover .cas-door-fan { opacity: 0.9; }
@media (prefers-reduced-motion: reduce) {
  .cas-door-art { transition: none; }
  .cas-door:hover .cas-door-art { transform: none; }
}
.aaa-q-lite .cas-door-fan { display: none; }

.cas-door-body {
  position: relative;          /* above the poster and its veil */
  margin-top: auto;
  padding: 1rem 0.95rem 1.05rem;
  display: grid;
  gap: 0.35rem;
  justify-items: center;
  text-align: center;
}
/* Brass nameplate. */
.cas-door-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.86rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: hsl(45 60% 88%);
  margin: 0;
  padding: 0.4rem 0.9rem;
  border-radius: 2px;
  border: 1px solid color-mix(in srgb, var(--aaa-cc) 34%, transparent);
  background: linear-gradient(180deg, hsla(45,55%,50%,0.16), hsla(45,55%,40%,0.05));
}
.cas-door-desc { font-size: 0.8rem; color: var(--aaa-ink-2); margin: 0; line-height: 1.4; }
.cas-door-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  margin-top: 0.2rem;
}
.cas-door-cta {
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: hsl(158 40% 88%);
}

/* A closed table states its reason on the door. */
.cas-door.is-closed { opacity: 0.72; }
.cas-door.is-closed .cas-door-name { color: var(--aaa-ink-2); border-color: var(--aaa-hairline); background: none; }
.cas-door-closed {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.5rem 0.8rem;
  background: hsla(2,60%,28%,0.5);
  border-top: 1px solid color-mix(in srgb, var(--aaa-danger) 40%, transparent);
  font-size: 0.74rem;
  color: hsl(2 70% 88%);
  text-align: center;
}

/* ── The house's own numbers ────────────────────────────────────────── */

.cas-rows { display: flex; flex-direction: column; }
.cas-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.62rem 0.1rem;
  border-bottom: 1px solid var(--aaa-hairline);
  font-size: 0.9rem;
}
.cas-row:last-child { border-bottom: 0; }
.cas-row .k { color: var(--aaa-ink-2); }
.cas-row .v { font-family: var(--aaa-mono); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Settlements: real results only ─────────────────────────────────── */

.cas-settle { display: flex; flex-direction: column; min-height: 150px; }
.cas-settle-row {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--aaa-hairline);
  font-size: 0.85rem;
}
.cas-settle-row:last-child { border-bottom: 0; }
.cas-settle-w { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--aaa-ink-2); }
.cas-settle-w b { color: var(--aaa-ink-1); font-weight: 600; }
.cas-settle-v { font-family: var(--aaa-mono); font-weight: 700; color: var(--aaa-cc); font-variant-numeric: tabular-nums; }
.cas-settle-v.is-loss { color: var(--aaa-ink-3); }

/* ── Layout ─────────────────────────────────────────────────────────── */

@media (min-width: 920px) {
  .cas-lower { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--aaa-gap); align-items: start; }
}

@media (max-height: 480px) and (orientation: landscape) {
  .cas-door { min-height: 190px; }
  .cas-doors { min-height: 190px; }
}


/* ══════════════════════════════════════════════════════════════════════
   THE CAULIFLOWER CASINO — the room, 100x.

   A Deco gaming floor rather than a list of links: the house purple on the
   Night, a brass-and-violet entrance under the crest, and five archways with
   the painted art set into them. Everything a player stakes is Crispy Cash,
   and the responsible-play band stays legible at every size — it is not
   decoration and never fades.
   ══════════════════════════════════════════════════════════════════════ */

/* ── The floor beneath everything ─────────────────────────────────────── */
.aaa-d-casino .aaa-env { background: var(--aaa-night-0); }
.cas-floor {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 70% at 50% -10%, hsl(275 70% 26% / 0.55), transparent 62%),
    radial-gradient(90% 60% at 12% 108%, hsl(45 80% 30% / 0.24), transparent 60%),
    radial-gradient(90% 60% at 88% 108%, hsl(300 70% 28% / 0.28), transparent 60%),
    var(--aaa-night-0);
}
/* A slow rake of house light across the felt. Compositor-only. */
.cas-floor::after {
  content: ""; position: absolute; inset: -20%;
  background: conic-gradient(from 200deg at 50% 0%,
    transparent 0deg, hsl(275 80% 60% / 0.10) 22deg, transparent 46deg,
    transparent 300deg, hsl(45 90% 60% / 0.07) 330deg, transparent 358deg);
  will-change: transform;
}
.aaa-q-enhanced .cas-floor::after { animation: cas-rake 64s linear infinite; }
@keyframes cas-rake { to { transform: rotate(360deg); } }

/* ── The entrance ─────────────────────────────────────────────────────── */
.cas-head { position: relative; text-align: center; display: grid; justify-items: center; padding-top: clamp(1rem, 4vw, 2.2rem); }
.cas-crest {
  width: clamp(150px, 26vw, 250px); height: auto;
  color: hsl(45 85% 58%);
  opacity: 0.5;
  margin-bottom: -1.6rem;
  filter: drop-shadow(0 0 26px hsl(45 95% 55% / 0.35));
}
.aaa-q-enhanced .cas-crest { animation: cas-breathe 7s var(--aaa-e-settle) infinite; }
@keyframes cas-breathe { 0%,100% { opacity: 0.42; } 50% { opacity: 0.62; } }

.cas-head .aaa-marquee {
  background: linear-gradient(180deg, #fff 18%, hsl(45 90% 72%) 60%, hsl(275 85% 76%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 34px hsl(275 85% 60% / 0.4));
}
.cas-head .aaa-lede { max-width: 46ch; }

/* The licence: a brass plate on the wall, not a chip. */
.cas-deed {
  display: inline-flex; align-items: center; gap: 0.75rem;
  margin-top: 1rem; padding: 0.6rem 1.1rem 0.6rem 0.7rem;
  border-radius: 12px;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, hsl(45 40% 12%), hsl(275 30% 8%)) padding-box,
    linear-gradient(100deg, hsl(45 90% 62% / 0.7), hsl(275 80% 60% / 0.55)) border-box;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55), inset 0 1px 0 hsl(45 90% 70% / 0.14);
}
.cas-deed img { border-radius: 50%; box-shadow: 0 0 16px hsl(45 90% 55% / 0.4); }
.cas-deed .k { display: block; font-family: var(--font-display); font-weight: 800; font-size: 0.5rem; letter-spacing: 0.28em; text-transform: uppercase; color: hsl(45 60% 62%); }
.cas-deed .v { display: block; font-size: 0.9rem; color: var(--aaa-ink-1); }
.cas-deed .v b { color: hsl(45 95% 68%); }

/* The responsible-play band: quiet, permanent, never decorative. */
.cas-band {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.6rem;
  margin: 1.2rem 0 0; padding: 0.75rem 1rem;
  width: 100%;
  border-top: 1px solid var(--aaa-hairline);
  border-bottom: 1px solid var(--aaa-hairline);
  font-size: 0.78rem; line-height: 1.5; color: var(--aaa-ink-3);
}
.cas-band b { color: var(--aaa-ink-2); }

/* ── The five archways ────────────────────────────────────────────────── */
.cas-doors {
  display: grid; gap: clamp(0.7rem, 1.6vw, 1rem);
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
}
.cas-door {
  position: relative; isolation: isolate;
  display: block; overflow: hidden;
  min-height: 300px;
  text-decoration: none; color: inherit;
  border-radius: 150px 150px 16px 16px;      /* the arch */
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, hsl(275 26% 11%), hsl(272 30% 6%)) padding-box,
    linear-gradient(180deg, hsl(45 90% 62% / 0.5), hsl(275 80% 60% / 0.45) 45%, hsl(275 30% 20% / 0.6)) border-box;
  box-shadow: 0 14px 40px rgba(0,0,0,0.55);
  transition: transform var(--aaa-t-move) var(--aaa-e-settle),
              box-shadow var(--aaa-t-move) var(--aaa-e-settle);
}
.cas-door-art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%; z-index: 0;
  transition: transform var(--aaa-t-open) var(--aaa-e-settle), filter var(--aaa-t-move) var(--aaa-e-settle);
}
.cas-door-veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, hsl(275 40% 6% / 0.25) 0%, transparent 26%,
    hsl(272 40% 5% / 0.72) 62%, hsl(272 45% 4% / 0.96) 100%);
}
.cas-door-fan {
  position: absolute; left: 50%; top: 0.7rem; transform: translateX(-50%);
  width: 62px; height: auto; z-index: 2;
  color: hsl(45 88% 62%); opacity: 0.55;
  transition: opacity var(--aaa-t-move) var(--aaa-e-settle), filter var(--aaa-t-move) var(--aaa-e-settle);
}
.cas-door-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: grid; gap: 0.3rem; justify-items: center; text-align: center;
  padding: 0 0.8rem 0.9rem;
}
.cas-door-name {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(0.86rem, 2vw, 1rem); letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,0.9);
}
.cas-door-desc { font-size: 0.74rem; line-height: 1.4; color: var(--aaa-ink-2); max-width: 26ch; }
.cas-door-facts { display: flex; gap: 0.3rem; flex-wrap: wrap; justify-content: center; margin-top: 0.15rem; }
.cas-door-facts .aaa-chip { font-size: 0.56rem; padding: 0.24rem 0.5rem; background: hsl(272 40% 8% / 0.85); }
.cas-door-cta {
  margin-top: 0.45rem; padding: 0.44rem 0.95rem; border-radius: 999px;
  font-family: var(--font-display); font-weight: 800; font-size: 0.58rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: hsl(278 80% 8%); background: linear-gradient(100deg, hsl(45 95% 64%), hsl(38 95% 56%));
  box-shadow: 0 0 18px hsl(45 95% 58% / 0.4);
}

.aaa-q-standard .cas-door:hover, .aaa-q-enhanced .cas-door:hover {
  transform: translate3d(0, -7px, 0);
  box-shadow: 0 26px 60px rgba(0,0,0,0.66), 0 0 40px hsl(275 85% 60% / 0.4);
}
.aaa-q-standard .cas-door:hover .cas-door-art,
.aaa-q-enhanced .cas-door:hover .cas-door-art { transform: scale(1.07); filter: saturate(1.2) brightness(1.1); }
.cas-door:hover .cas-door-fan { opacity: 1; filter: drop-shadow(0 0 14px hsl(45 95% 60% / 0.8)); }
.cas-door:focus-visible { outline: 2px solid hsl(45 95% 62%); outline-offset: 4px; }

/* A table the house holds shut. Velvet rope, not an error. */
.cas-door.is-closed { cursor: default; }
.cas-door.is-closed .cas-door-art { filter: grayscale(0.85) brightness(0.42); }
.cas-door.is-closed .cas-door-fan { opacity: 0.2; }
.aaa-q-standard .cas-door.is-closed:hover, .aaa-q-enhanced .cas-door.is-closed:hover {
  transform: none; box-shadow: 0 14px 40px rgba(0,0,0,0.55);
}
.cas-door.is-closed:hover .cas-door-art { transform: none; filter: grayscale(0.85) brightness(0.42); }
.cas-door-closed {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  z-index: 4; white-space: nowrap;
  padding: 0.5rem 1rem; border-radius: 8px;
  font-family: var(--font-display); font-weight: 800; font-size: 0.58rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: hsl(45 90% 74%);
  background: hsl(272 45% 5% / 0.92);
  border: 1px solid hsl(45 80% 58% / 0.5);
  box-shadow: 0 8px 26px rgba(0,0,0,0.6);
}

@media (max-width: 560px) {
  .cas-doors { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .cas-door { min-height: 250px; border-radius: 110px 110px 14px 14px; }
  .cas-band { gap: 0.35rem 1rem; font-size: 0.74rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cas-floor::after, .cas-crest { animation: none; }
  .cas-door, .cas-door-art, .cas-door-fan { transition: none; }
  .cas-door:hover { transform: none; }
}

/* The earlier rule set `inset: auto 0 0 0`, so right:0 and bottom:0 survived
   into the centred plate and stretched it into a tall empty box. Reset them. */
.cas-door-closed { right: auto; bottom: auto; }

/* The painted art is square and the arch was far taller than wide, which cropped
   each poster's own title away. Shorter, wider openings keep the art readable. */
.cas-doors { grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); }
.cas-door { min-height: 268px; }
.cas-door-art { object-position: 50% 26%; }
@media (max-width: 560px) {
  .cas-doors { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
  .cas-door { min-height: 236px; }
}


/* Frame the illustration, not the poster's title band: the door already names
   the table in text, and a half-cut word reads as a broken image. */
.cas-door-art { object-position: 50% 56%; }

/* The posters are square and carry their name edge to edge, so a taller-than-
   wide opening sliced the ends off every one ("ICK A CARD"). Bringing the arch
   closer to square keeps the whole poster inside it. */
.cas-door { min-height: 238px; }
.cas-door-art { object-position: 50% 44%; }
@media (max-width: 560px) { .cas-door { min-height: 210px; } }


/* ══════════════════════════════════════════════════════════════════════
   THE MARQUEE — the sign over the door.

   A bulb-lit Deco frame, a sunburst behind the crest, and gold foil moving
   across the name. Every moving part is a transform or an opacity on its own
   layer: the bulbs never repaint, only the light crossing them moves.
   ══════════════════════════════════════════════════════════════════════ */

.cas-head { padding-inline: clamp(1rem, 4vw, 2.4rem); padding-bottom: 1.4rem; }

/* ── The frame ────────────────────────────────────────────────────────── */
.cas-marquee-frame {
  position: absolute; inset: 0 0 4.6rem;
  border-radius: 26px;
  border: 1px solid hsl(45 80% 58% / 0.28);
  background:
    radial-gradient(120% 90% at 50% 0%, hsl(275 70% 30% / 0.4), transparent 62%),
    linear-gradient(180deg, hsl(275 40% 10% / 0.5), transparent 60%);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* One static ring of bulbs, painted once. */
.cas-bulbs {
  position: absolute; inset: 9px; border-radius: 20px;
  background:
    repeating-linear-gradient(90deg, hsl(45 90% 66%) 0 5px, transparent 5px 26px) top    / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, hsl(45 90% 66%) 0 5px, transparent 5px 26px) bottom / 100% 5px no-repeat,
    repeating-linear-gradient(0deg,  hsl(45 90% 66%) 0 5px, transparent 5px 26px) left   / 5px 100% no-repeat,
    repeating-linear-gradient(0deg,  hsl(45 90% 66%) 0 5px, transparent 5px 26px) right  / 5px 100% no-repeat;
  opacity: 0.34;
  filter: drop-shadow(0 0 5px hsl(45 95% 60% / 0.55));
}
/* One light travelling round them. Transform only. */
.cas-chase {
  position: absolute; top: -55%; left: -60%;
  width: 60%; height: 210%;
  background: linear-gradient(100deg, transparent, hsl(45 100% 78% / 0.5) 45%, hsl(45 100% 88% / 0.75) 50%, hsl(45 100% 78% / 0.5) 55%, transparent);
  mix-blend-mode: screen;
  will-change: transform;
}
.aaa-q-enhanced .cas-chase { animation: cas-chase 5.4s linear infinite; }
.aaa-q-standard .cas-chase { animation: cas-chase 7s linear infinite; }
@keyframes cas-chase { from { transform: translate3d(0,0,0) skewX(-12deg); } to { transform: translate3d(300%,0,0) skewX(-12deg); } }

/* ── The sunburst behind the crest ───────────────────────────────────── */
.cas-rays {
  position: absolute; top: 6.4rem; left: 50%;
  width: min(660px, 92%); aspect-ratio: 1;
  transform: translateX(-50%);
  background: conic-gradient(from 0deg,
    hsl(45 90% 60% / 0.16) 0 3deg, transparent 3deg 15deg,
    hsl(45 90% 60% / 0.16) 15deg 18deg, transparent 18deg 30deg,
    hsl(45 90% 60% / 0.16) 30deg 33deg, transparent 33deg 45deg,
    hsl(45 90% 60% / 0.16) 45deg 48deg, transparent 48deg 60deg,
    hsl(45 90% 60% / 0.16) 60deg 63deg, transparent 63deg 75deg,
    hsl(45 90% 60% / 0.16) 75deg 78deg, transparent 78deg 90deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 72%);
          mask-image: radial-gradient(closest-side, #000 20%, transparent 72%);
  pointer-events: none; z-index: 0; will-change: transform;
}
.aaa-q-enhanced .cas-rays { animation: cas-spin 90s linear infinite; }
@keyframes cas-spin { to { transform: translateX(-50%) rotate(360deg); } }

.cas-head > *:not(.cas-marquee-frame):not(.cas-rays) { position: relative; z-index: 1; }

/* ── Gold across the name ────────────────────────────────────────────── */
.cas-title { position: relative; overflow: hidden; }
.cas-foil {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 38%, hsl(45 100% 92% / 0.85) 48%, transparent 58%);
  mix-blend-mode: overlay;
  pointer-events: none; will-change: transform;
}
.aaa-q-enhanced .cas-foil { animation: cas-foil 6.5s var(--aaa-e-settle) infinite; }
@keyframes cas-foil {
  0%, 62% { transform: translate3d(-130%,0,0); }
  100%    { transform: translate3d(130%,0,0); }
}

/* ── The crest, richer ───────────────────────────────────────────────── */
.cas-crest {
  width: clamp(160px, 27vw, 270px);
  opacity: 0.62;
  filter: drop-shadow(0 0 30px hsl(45 95% 55% / 0.5)) drop-shadow(0 2px 0 hsl(45 60% 30%));
}

/* ── The proprietor ──────────────────────────────────────────────────── */
.cas-deed { padding: 0.65rem 1.3rem 0.65rem 0.75rem; gap: 0.95rem; }
.cas-deed img {
  width: 72px; height: 72px; object-fit: cover;
  border: 2px solid hsl(45 85% 60% / 0.55);
  box-shadow: 0 0 24px hsl(45 90% 55% / 0.45), inset 0 0 20px hsl(275 70% 40% / 0.5);
}
.aaa-q-enhanced .cas-deed img { animation: cas-float 6s var(--aaa-e-settle) infinite; }
@keyframes cas-float { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-4px,0); } }
.cas-deed .v { font-size: 1rem; }

/* ── The bankroll ────────────────────────────────────────────────────── */
.cas-purse {
  display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap;
  margin-top: 1rem;
}
.cas-purse > * {
  position: relative;
  padding: 0.55rem 1.1rem !important;
  border-radius: 999px;
  font-family: var(--font-display); font-weight: 800;
  letter-spacing: 0.06em;
  border: 1px solid hsl(45 80% 58% / 0.45) !important;
  background: linear-gradient(180deg, hsl(275 30% 13%), hsl(275 34% 8%)) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5), inset 0 1px 0 hsl(45 90% 70% / 0.16);
}

@media (max-width: 720px) {
  .cas-marquee-frame { inset: 0 0 3.6rem; border-radius: 20px; }
  .cas-bulbs { inset: 7px; border-radius: 15px; }
  .cas-rays { top: 5rem; }
  .cas-deed img { width: 58px; height: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .cas-chase, .cas-rays, .cas-foil, .cas-deed img { animation: none !important; }
  .cas-chase, .cas-foil { opacity: 0; }
}

/* The chase was a 60%-wide screen-blended wash — it lit the entire sign
   instead of running round the bulbs. Narrow, dim, and no blend mode: a glint
   travelling the frame, which is what a marquee actually does. */
.cas-chase {
  top: -30%; left: -25%;
  width: 14%; height: 160%;
  mix-blend-mode: normal;
  background: linear-gradient(100deg, transparent, hsl(45 100% 82% / 0.14) 46%, hsl(45 100% 92% / 0.22) 50%, hsl(45 100% 82% / 0.14) 54%, transparent);
  filter: blur(6px);
}
@keyframes cas-chase { from { transform: translate3d(0,0,0) skewX(-14deg); } to { transform: translate3d(760%,0,0) skewX(-14deg); } }

/* The bulbs carry the light themselves — they pulse rather than being washed. */
.cas-bulbs { opacity: 0.42; }
.aaa-q-enhanced .cas-bulbs { animation: cas-bulb 3.4s var(--aaa-e-settle) infinite; }
@keyframes cas-bulb { 0%,100% { opacity: 0.34; } 50% { opacity: 0.56; } }

/* Let the sunburst actually read behind the crest. */
.cas-rays { opacity: 0.9; }
.cas-marquee-frame { background: linear-gradient(180deg, hsl(275 40% 10% / 0.42), transparent 62%); }
@media (prefers-reduced-motion: reduce) { .cas-bulbs { animation: none; } }


/* ── The floor's pulse ───────────────────────────────────────────────── */
.cas-live {
  display: inline-flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.9rem; padding: 0.5rem 1.1rem;
  border-radius: 999px;
  border: 1px solid hsl(275 70% 60% / 0.4);
  background: linear-gradient(100deg, hsl(275 70% 40% / 0.2), hsl(272 40% 8% / 0.7) 70%);
  max-width: 100%;
}
.cas-live-k {
  font-family: var(--font-display); font-weight: 800; font-size: 0.5rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: hsl(275 85% 78%);
  white-space: nowrap;
}
.cas-live-k::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-right: 0.45rem; vertical-align: middle;
  background: hsl(275 90% 68%); box-shadow: 0 0 8px hsl(275 90% 68%);
}
.aaa-q-enhanced .cas-live-k::before { animation: cas-pulse 2.2s var(--aaa-e-settle) infinite; }
@keyframes cas-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.cas-live-v { font-size: 0.88rem; color: var(--aaa-ink-2); }
.cas-live-v b { color: var(--aaa-ink-1); }
.cas-live-cc { color: hsl(45 95% 68%); font-weight: 700; font-variant-numeric: tabular-nums; }
.cas-live.is-quiet { border-color: var(--aaa-hairline); background: hsl(272 30% 8% / 0.6); }
.cas-live.is-quiet .cas-live-k { color: var(--aaa-ink-3); }
.cas-live.is-quiet .cas-live-k::before { background: var(--aaa-ink-3); box-shadow: none; animation: none; }

/* Tighten the entrance: the crest was floating in dead air. */
.cas-crest { margin-bottom: -2.4rem; margin-top: -0.6rem; }
.cas-head .aaa-lede { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .cas-live-k::before { animation: none; } }


/* ── The house's numbers ─────────────────────────────────────────────── */
.cas-facts {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1rem, 5vw, 3.4rem);
  margin-top: 1.1rem;
}
.cas-facts > span { display: grid; gap: 0.1rem; justify-items: center; }
.cas-facts b {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1rem, 2.4vw, 1.3rem); line-height: 1;
  color: hsl(45 95% 70%); text-shadow: 0 0 18px hsl(45 95% 55% / 0.4);
  font-variant-numeric: tabular-nums;
}
.cas-facts i {
  font-style: normal;
  font-family: var(--font-display); font-weight: 800; font-size: 0.48rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--aaa-ink-3);
}

/* The entrance reads as one column; close the dead air around the crest. */
.cas-crest { margin-top: -1.2rem; margin-bottom: -2.8rem; width: clamp(150px, 23vw, 230px); }
.cas-purse { margin-top: 0.9rem; }


/* ══════════════════════════════════════════════════════════════════════
   THE HERO — the proprietor on his own floor.

   Two columns: the sign on the left, Don Carrotelli filling the right, the
   painted art bleeding beneath everything. Same move as the Lobby's District
   01 gate — a real image at real scale, and copy set against it rather than
   centred in a void.
   ══════════════════════════════════════════════════════════════════════ */
.cas-hero {
  position: relative; isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  grid-template-rows: 1fr auto;
  align-items: center; justify-items: start; text-align: left;
  min-height: clamp(460px, 56vw, 640px);
  padding: 0; margin-top: 0.4rem;
  border-radius: 28px; overflow: hidden;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, hsl(275 30% 8%), hsl(272 34% 5%)) padding-box,
    linear-gradient(140deg, hsl(45 90% 62% / 0.65), hsl(275 80% 60% / 0.5) 45%, hsl(45 80% 55% / 0.5)) border-box;
  box-shadow: 0 30px 90px rgba(0,0,0,0.65), 0 0 60px hsl(275 85% 55% / 0.18);
}
/* The art: framed on the Don, the pass overlay cropped off the right. */
.cas-hero-art {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  object-position: 62% 40%;
  transform: scale(1.02);
}
.aaa-q-enhanced .cas-hero-art { animation: cas-hero-drift 40s var(--aaa-e-settle) infinite alternate; }
@keyframes cas-hero-drift { from { transform: scale(1.02) translate3d(0,0,0); } to { transform: scale(1.06) translate3d(-1.2%,-0.8%,0); } }
/* The veil: art stays legible on the right, copy stays legible on the left. */
.cas-hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, hsl(272 40% 5% / 0.97) 0%, hsl(272 40% 5% / 0.92) 34%, hsl(272 40% 5% / 0.55) 52%, hsl(272 40% 5% / 0.12) 72%, transparent 100%),
    linear-gradient(180deg, hsl(272 40% 5% / 0.35) 0%, transparent 30%, transparent 62%, hsl(272 40% 5% / 0.85) 100%);
}
.cas-hero .cas-marquee-frame { inset: 0; border: 0; border-radius: 28px; background: none; z-index: 2; }
.cas-hero .cas-bulbs { inset: 11px; border-radius: 22px; }

.cas-hero-copy {
  position: relative; z-index: 3;
  display: grid; gap: 0.55rem; justify-items: start;
  padding: clamp(1.4rem, 4vw, 2.8rem) clamp(1.2rem, 3.4vw, 2.6rem) clamp(1rem, 2.6vw, 1.6rem);
  max-width: 100%;
}
.cas-hero .aaa-plate { margin: 0; }
.cas-hero .cas-title {
  margin: 0.2rem 0 0;
  font-size: clamp(2rem, 5.6vw, 4rem); line-height: 0.98;
  filter: drop-shadow(0 4px 30px rgba(0,0,0,0.9)) drop-shadow(0 0 30px hsl(275 85% 60% / 0.35));
}
.cas-hero .aaa-lede { margin: 0.35rem 0 0; max-width: 42ch; text-align: left; font-size: clamp(0.9rem, 1.4vw, 1.02rem); }
.cas-hero .cas-facts { justify-content: flex-start; gap: clamp(1rem, 3.4vw, 2.6rem); margin-top: 0.85rem; }
.cas-hero .cas-facts > span { justify-items: start; }
.cas-hero .cas-purse { justify-content: flex-start; margin-top: 0.85rem; }
.cas-hero .cas-live { margin-top: 0.75rem; }

/* The deed, on the wall bottom-right — over the art, brass on dark. */
.cas-hero .cas-deed {
  position: absolute; right: clamp(1rem, 3vw, 2.2rem); bottom: 4.6rem; z-index: 3;
  margin: 0; padding: 0.55rem 1.1rem 0.55rem 0.7rem;
  background:
    linear-gradient(180deg, hsl(45 40% 12% / 0.96), hsl(275 30% 8% / 0.96)) padding-box,
    linear-gradient(100deg, hsl(45 90% 62% / 0.75), hsl(275 80% 60% / 0.55)) border-box;
}
.cas-deed-fan { width: 46px; height: auto; color: hsl(45 88% 62%); filter: drop-shadow(0 0 10px hsl(45 95% 55% / 0.6)); }
.cas-hero .cas-deed .v { font-size: 0.92rem; }

/* The band runs the full width along the bottom of the hero. */
.cas-hero .cas-band {
  grid-column: 1 / -1; grid-row: 2; z-index: 3; position: relative;
  margin: 0; width: 100%;
  padding: 0.7rem clamp(1rem, 3vw, 2rem);
  border-top: 1px solid hsl(45 80% 58% / 0.28); border-bottom: 0;
  background: hsl(272 40% 4% / 0.82);
  justify-content: center;
}

/* Kill the standalone crest and rays — the art carries the entrance now. */
.cas-crest, .cas-rays { display: none; }

@media (max-width: 900px) {
  .cas-hero { grid-template-columns: 1fr; min-height: 0; text-align: left; }
  .cas-hero-art { object-position: 70% 30%; }
  .cas-hero-veil {
    background:
      linear-gradient(180deg, hsl(272 40% 5% / 0.55) 0%, hsl(272 40% 5% / 0.82) 40%, hsl(272 40% 5% / 0.95) 100%);
  }
  .cas-hero-copy { padding-top: clamp(9rem, 44vw, 15rem); }
  .cas-hero .cas-deed { position: relative; right: auto; bottom: auto; margin: 0 1.2rem 1rem; justify-self: start; }
  .cas-hero .cas-facts { gap: 1.2rem 1.6rem; }
}
@media (prefers-reduced-motion: reduce) { .cas-hero-art { animation: none; } }


/* .cas-hero is its own scope now — none of the three earlier .cas-head passes
   reach it. Restate what it needs from them. */
.cas-hero .cas-title { position: relative; overflow: hidden; }
.cas-hero .cas-title em { color: inherit; }
.cas-hero .cas-marquee-frame { position: absolute; pointer-events: none; overflow: hidden; }
.cas-hero .cas-bulbs {
  position: absolute; border-radius: 22px;
  background:
    repeating-linear-gradient(90deg, hsl(45 90% 66%) 0 5px, transparent 5px 26px) top    / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, hsl(45 90% 66%) 0 5px, transparent 5px 26px) bottom / 100% 5px no-repeat,
    repeating-linear-gradient(0deg,  hsl(45 90% 66%) 0 5px, transparent 5px 26px) left   / 5px 100% no-repeat,
    repeating-linear-gradient(0deg,  hsl(45 90% 66%) 0 5px, transparent 5px 26px) right  / 5px 100% no-repeat;
  opacity: 0.42;
  filter: drop-shadow(0 0 5px hsl(45 95% 60% / 0.55));
}
.cas-hero .cas-chase { position: absolute; will-change: transform; }
.cas-hero .cas-deed { display: inline-flex; align-items: center; gap: 0.75rem; border-radius: 12px; border: 1px solid transparent; box-shadow: 0 10px 30px rgba(0,0,0,0.6), inset 0 1px 0 hsl(45 90% 70% / 0.14); }
.cas-hero .cas-deed .k { display: block; font-family: var(--font-display); font-weight: 800; font-size: 0.5rem; letter-spacing: 0.28em; text-transform: uppercase; color: hsl(45 60% 62%); }
.cas-hero .cas-deed .v { display: block; color: var(--aaa-ink-1); }
.cas-hero .cas-deed .v b { color: hsl(45 95% 68%); }
.cas-hero .cas-band { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; font-size: 0.78rem; line-height: 1.5; color: var(--aaa-ink-3); }
.cas-hero .cas-band b { color: var(--aaa-ink-2); }
.cas-hero .cas-purse { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.cas-hero .cas-facts { display: flex; flex-wrap: wrap; }
.cas-hero .cas-facts > span { display: grid; gap: 0.1rem; }
.cas-hero .cas-live { display: inline-flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }

/* Frame the clean portrait. The source is 1024 wide; the Don occupies the left
   ~58% and the rewards-pass overlay the right ~42%. Anchoring the crop at the
   left edge keeps him and drops the overlay off the right side of the frame,
   and the copy column then sits over the wall behind him rather than his face. */
.cas-hero-art { object-position: 0% 30%; }
@keyframes cas-hero-drift { from { transform: scale(1.02) translate3d(0,0,0); } to { transform: scale(1.06) translate3d(0.8%,-0.6%,0); } }
.cas-hero-veil {
  background:
    linear-gradient(90deg, hsl(272 40% 5% / 0.97) 0%, hsl(272 40% 5% / 0.9) 30%, hsl(272 40% 5% / 0.4) 48%, transparent 64%),
    linear-gradient(180deg, hsl(272 40% 5% / 0.3) 0%, transparent 28%, transparent 66%, hsl(272 40% 5% / 0.88) 100%),
    linear-gradient(270deg, hsl(272 40% 5% / 0.85) 0%, hsl(272 40% 5% / 0.4) 12%, transparent 30%);
}

/* At the hero's aspect the frame is wider than the source can fill with the
   overlay hidden. Give the art its own box: the right 56% of the hero,
   framed on the portrait, and let the copy sit on the wall to its left. The
   overlay is cropped away by the box, not by hope. */
.cas-hero-art {
  inset: 0 0 0 auto; width: 56%; height: 100%;
  object-fit: cover; object-position: 0% 28%;
  transform: none;
}
.aaa-q-enhanced .cas-hero-art { animation: cas-hero-drift 40s var(--aaa-e-settle) infinite alternate; }
@keyframes cas-hero-drift { from { transform: scale(1) translate3d(0,0,0); } to { transform: scale(1.05) translate3d(-1%,-0.6%,0); } }
.cas-hero-veil {
  background:
    /* copy side: solid wall that dissolves into the portrait */
    linear-gradient(90deg, hsl(272 40% 6%) 0%, hsl(272 40% 6%) 40%, hsl(272 40% 6% / 0.6) 50%, transparent 60%),
    /* floor and ceiling */
    linear-gradient(180deg, hsl(272 40% 5% / 0.4) 0%, transparent 26%, transparent 64%, hsl(272 40% 5% / 0.9) 100%),
    /* right edge, so the art does not end in a hard line */
    linear-gradient(270deg, hsl(272 40% 6% / 0.7) 0%, transparent 10%);
}
/* A little house light on the wall behind the copy, so it is not flat black. */
.cas-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(60% 80% at 8% 20%, hsl(275 75% 40% / 0.32), transparent 60%),
    radial-gradient(40% 60% at 30% 100%, hsl(45 80% 45% / 0.14), transparent 60%);
}

/* Keep the cigar in frame — it is the character. */
.cas-hero-art { width: 60%; object-position: 12% 26%; }
@media (max-width: 900px) {
  .cas-hero-art { inset: 0; width: 100%; object-position: 0% 20%; }
  .cas-hero::before { display: none; }
}

/* The last sliver of the source overlay showed at the right edge. The Don is
   in the source's left 58%; hold the box at 56% wide and anchor the crop at
   the left, and the overlay cannot enter the frame at any hero width. */
.cas-hero-art { width: 56%; object-position: 0% 26%; }


/* ══════════════════════════════════════════════════════════════════════
   BEATING THE LIVE SITE — measured, then exceeded.
   ══════════════════════════════════════════════════════════════════════ */

/* ── The title row: die · CASINO · slot ──────────────────────────────── */
.cas-title-row { display: flex; align-items: center; gap: clamp(0.4rem, 1.4vw, 1rem); margin-top: 0.2rem; }
.cas-hero .cas-title {
  margin: 0;
  font-size: clamp(2.4rem, 6.4vw, 5rem); line-height: 0.95;
  letter-spacing: -0.005em;
  background: linear-gradient(135deg, #fff 0%, hsl(280 80% 80%) 30%, hsl(275 78% 62%) 55%, hsl(45 100% 60%) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 30px rgba(0,0,0,0.9)) drop-shadow(0 0 34px hsl(275 85% 60% / 0.45));
}
.cas-prop {
  font-size: clamp(1.6rem, 3.6vw, 2.8rem); line-height: 1;
  filter: drop-shadow(0 0 16px hsl(45 95% 60% / 0.7));
  will-change: transform;
}
.aaa-q-enhanced .cas-prop-die  { animation: cas-die 4s cubic-bezier(0.34,1.56,0.64,1) infinite; }
.aaa-q-enhanced .cas-prop-slot { animation: cas-slot 5.2s var(--aaa-e-settle) infinite; }
@keyframes cas-die  { 0%,100% { transform: rotate(-12deg) translateY(0); } 50% { transform: rotate(348deg) translateY(-8px); } }
@keyframes cas-slot { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(6deg); } }

/* ── The win strip: full width, endless ──────────────────────────────── */
.cas-strip {
  position: relative; overflow: hidden;
  margin: 0.9rem 0 0; padding: 0.55rem 0;
  border-top: 1px solid hsl(45 80% 58% / 0.28);
  border-bottom: 1px solid hsl(45 80% 58% / 0.28);
  background: linear-gradient(90deg, hsl(272 40% 6%), hsl(275 40% 9%) 50%, hsl(272 40% 6%));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.cas-strip-track {
  display: inline-flex; gap: 2.4rem; white-space: nowrap;
  will-change: transform;
  animation: cas-strip 46s linear infinite;
}
.cas-strip:hover .cas-strip-track { animation-play-state: paused; }
@keyframes cas-strip { to { transform: translate3d(-50%,0,0); } }
.cas-strip-item { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.86rem; color: var(--aaa-ink-2); }
.cas-strip-item i { font-style: normal; font-size: 1rem; }
.cas-strip-item b { color: var(--aaa-ink-1); }
.cas-strip-item em { font-style: normal; font-weight: 800; color: hsl(45 95% 68%); font-variant-numeric: tabular-nums; text-shadow: 0 0 10px hsl(45 95% 55% / 0.4); }

/* ── The doors: the poster, whole ────────────────────────────────────── */
.cas-doors { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(0.8rem, 1.8vw, 1.2rem); }
.cas-door {
  min-height: 0; border-radius: 18px;
  display: grid; grid-template-rows: auto 1fr;
  background:
    linear-gradient(180deg, hsl(275 26% 11%), hsl(272 30% 6%)) padding-box,
    linear-gradient(160deg, hsl(45 90% 62% / 0.55), hsl(275 80% 60% / 0.4) 50%, hsl(275 30% 20% / 0.6)) border-box;
}
.cas-door-screen {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 1; border-radius: 17px 17px 0 0;
}
.cas-door-art {
  position: static; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  display: block;
}
.cas-door-veil {
  background: linear-gradient(180deg, transparent 55%, hsl(272 40% 5% / 0.7) 100%);
}
.cas-door-fan { top: auto; bottom: 0.55rem; width: 44px; opacity: 0.55; }
.cas-door-body {
  position: static; padding: 0.85rem 0.9rem 0.95rem;
  gap: 0.35rem; justify-items: start; text-align: left;
}
.cas-door-name { font-size: 0.86rem; text-shadow: none; }
.cas-door-desc { max-width: none; }
.cas-door-facts { justify-content: flex-start; }
.cas-door-cta { justify-self: stretch; text-align: center; margin-top: 0.55rem; padding: 0.6rem 1rem; font-size: 0.62rem; }

.cas-door.is-closed .cas-door-art { filter: grayscale(0.85) brightness(0.45); }
.cas-door-closed { top: 34%; }

@media (max-width: 560px) {
  .cas-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .cas-door-body { padding: 0.65rem 0.7rem 0.75rem; }
  .cas-door-desc { display: none; }
  .cas-title-row { gap: 0.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cas-prop, .cas-strip-track { animation: none; }
}

/* The title wrapped to two lines and pushed the slot prop out over the Don.
   Keep the props to the title's own width, and let it be two lines on the left
   where it belongs — the props bracket the block, not the whole column. */
.cas-title-row { display: inline-flex; align-items: flex-start; }
.cas-hero .cas-title { flex: 0 1 auto; }
.cas-prop-die { margin-top: 0.35em; }
.cas-prop-slot { align-self: flex-end; margin-bottom: 0.2em; }
.cas-hero-copy { max-width: 56%; }
@media (max-width: 900px) { .cas-hero-copy { max-width: 100%; } }


/* ── The title, rebuilt so it cannot wrap ────────────────────────────── */
.cas-hero-copy { max-width: 100%; }
.cas-hero .cas-title {
  display: grid; gap: 0; margin: 0.15rem 0 0;
  background: none; -webkit-background-clip: initial; background-clip: initial; color: inherit;
  filter: none; overflow: visible; font-size: 1rem; line-height: 1;
}
.cas-title-top {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.9rem, 2vw, 1.35rem); letter-spacing: 0.34em; text-transform: uppercase;
  color: hsl(45 90% 72%); text-shadow: 0 0 18px hsl(45 95% 55% / 0.45);
  padding-left: 0.1em;
}
.cas-title-row { display: flex; align-items: center; gap: clamp(0.35rem, 1.2vw, 0.9rem); margin-top: 0.1rem; }
.cas-title-word {
  position: relative; display: inline-block; overflow: hidden;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(3rem, 8.4vw, 6.6rem); line-height: 0.92; letter-spacing: -0.01em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #fff 0%, hsl(280 80% 82%) 28%, hsl(275 78% 62%) 55%, hsl(45 100% 60%) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 30px rgba(0,0,0,0.9)) drop-shadow(0 0 36px hsl(275 85% 60% / 0.45));
  padding-right: 0.06em; /* the italic-ish O's tail */
}
.cas-prop { font-size: clamp(1.9rem, 4.6vw, 3.6rem); margin: 0; align-self: center; }
.cas-prop-die, .cas-prop-slot { margin: 0; }

/* overflow:hidden on the word (for the foil sweep) was clipping the O. Let the
   word overflow freely and clip the foil to the glyphs via background-clip on
   its own layer instead. Nothing gets cut. */
.cas-title-word { overflow: visible; padding-right: 0.12em; }
.cas-title-word .cas-foil {
  inset: -0.1em -0.15em;
  -webkit-mask-image: linear-gradient(#000, #000);
          mask-image: linear-gradient(#000, #000);
  clip-path: inset(0 round 4px);
}
/* Five posters need five columns on a wide floor — no orphan on row two. */
.cas-doors { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
@media (min-width: 1240px) { .cas-doors { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* The word box was 370px for a 454px glyph run: the flex row shrank it, and
   background-clip:text clips the gradient to the box, so the O vanished. The
   word never shrinks and never wraps; the props yield instead. */
.cas-title-word { flex: 0 0 auto; white-space: nowrap; display: inline-block; }
.cas-prop { flex: 0 1 auto; min-width: 0; }
.cas-title-row { flex-wrap: nowrap; }

/* Portrait: the Don was gone — a wall of purple with a sliver of art up top.
   Put him across the top of the hero at real size, and drop the copy in below
   under a veil that only darkens toward the bottom. */
@media (max-width: 900px) {
  .cas-hero { grid-template-rows: auto auto; min-height: 0; }
  .cas-hero-art {
    position: relative; inset: auto; width: 100%; height: auto;
    aspect-ratio: 1024 / 640; object-fit: cover; object-position: 8% 18%;
    grid-row: 1; z-index: 0; animation: none;
  }
  .cas-hero-veil {
    background:
      linear-gradient(180deg, transparent 0%, transparent 32%, hsl(272 40% 6% / 0.72) 48%, hsl(272 40% 6%) 60%, hsl(272 40% 6%) 100%);
  }
  .cas-hero-copy { grid-row: 1 / 3; align-self: end; padding-top: 0; margin-top: -3rem; }
  .cas-hero .cas-chase { display: none; }
  .cas-hero .aaa-plate { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cas-hero .cas-live { flex-direction: column; align-items: flex-start; gap: 0.25rem; text-align: left; }
  .cas-hero .cas-band { justify-content: flex-start; }
}

/* Portrait, done properly: no grid at all. Stack in source order — art, then
   copy over its lower half, then deed, then band — and reset every explicit
   grid placement the desktop layout gave those pieces. */
@media (max-width: 900px) {
  .cas-hero { display: block; padding: 0; }
  .cas-hero-art  { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 1024 / 620; object-fit: cover; object-position: 8% 14%; }
  .cas-hero-veil { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, transparent 22%, hsl(272 40% 6% / 0.85) 40%, hsl(272 40% 6%) 52%, hsl(272 40% 6%) 100%); }
  .cas-hero-copy { position: relative; display: grid; margin-top: -42vw; padding: 0 1.1rem 0.9rem; grid-row: auto; grid-column: auto; max-width: 100%; }
  .cas-hero .cas-deed { position: relative; right: auto; bottom: auto; margin: 0 1.1rem 0.9rem; grid-row: auto; grid-column: auto; }
  .cas-hero .cas-band { position: relative; grid-row: auto; grid-column: auto; width: auto; margin: 0; }
  .cas-hero .cas-marquee-frame { z-index: 3; }
  .cas-hero::before { display: none; }
}

@media (max-width: 900px) {
  /* The veil must cover the ART's box, not the whole hero: wrap-in-place by
     making the art the positioned reference the veil sits over. */
  .cas-hero { position: relative; }
  .cas-hero-art { aspect-ratio: 1 / 1; object-position: 0% 10%; }   /* the Don, square, overlay cropped */
  .cas-hero-veil {
    position: absolute; left: 0; right: 0; top: 0;
    height: 100vw; max-height: 390px;   /* exactly the art's box */
    background: linear-gradient(180deg, transparent 0%, transparent 34%, hsl(272 40% 6% / 0.7) 56%, hsl(272 40% 6%) 72%, hsl(272 40% 6%) 100%);
    z-index: 1;
  }
  .cas-hero-copy { z-index: 2; margin-top: -30vw; }
  .cas-hero .aaa-plate { white-space: normal; overflow: visible; }
}


/* ══════════════════════════════════════════════════════════════════════
   THE FLOOR CARDS — each is its machine in miniature.
   ══════════════════════════════════════════════════════════════════════ */
.cas-door-screen { isolation: isolate; }
.cas-mini {
  position: absolute; z-index: 3; left: 50%; bottom: 0.9rem; transform: translateX(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.7));
  will-change: transform;
  transition: transform 260ms var(--aaa-e-settle);
}
.cas-door:hover .cas-mini { transform: translateX(-50%) translateY(-6px) scale(1.06); }
.cas-door-fan { display: none; }   /* the miniature takes the ornament's place */

/* Coin */
.cas-mini-coin i {
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  font-family: var(--font-display); font-weight: 900; font-size: 1.4rem; font-style: normal;
  color: hsl(40 70% 22%); background: radial-gradient(circle at 35% 30%, hsl(48 100% 78%), hsl(42 95% 52%) 60%, hsl(38 80% 38%));
  border: 4px solid hsl(45 70% 40%); box-shadow: inset 0 0 0 3px hsl(45 90% 70% / 0.6);
}
.aaa-q-enhanced .cas-door:hover .cas-mini-coin i { animation: mini-coin 1.1s cubic-bezier(0.34,1.3,0.64,1) infinite; }
@keyframes mini-coin { 0%,100% { transform: rotateY(0) translateY(0); } 50% { transform: rotateY(540deg) translateY(-14px); } }

/* Reels */
.cas-mini-reels { gap: 4px; padding: 5px; border-radius: 10px; background: hsl(272 34% 5% / 0.92); border: 1px solid hsl(45 80% 58% / 0.45); }
.cas-mini-reels i { display: grid; place-items: center; width: 34px; height: 40px; border-radius: 6px; background: hsl(0 0% 100% / 0.06); font-style: normal; font-size: 1.15rem; overflow: hidden; }
.aaa-q-enhanced .cas-door:hover .cas-mini-reels i { animation: mini-reel 0.55s steps(3) infinite; }
.aaa-q-enhanced .cas-door:hover .cas-mini-reels i:nth-child(2) { animation-duration: 0.7s; }
.aaa-q-enhanced .cas-door:hover .cas-mini-reels i:nth-child(3) { animation-duration: 0.85s; }
@keyframes mini-reel { from { transform: translateY(-40px); } to { transform: translateY(40px); } }

/* Die */
.cas-mini-die {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; width: 56px; height: 56px; padding: 9px; box-sizing: border-box;
  border-radius: 12px; background: linear-gradient(145deg, #fff, hsl(0 0% 86%));
  box-shadow: inset 0 -4px 8px rgba(0,0,0,0.12), inset 0 3px 6px #fff, 0 8px 18px rgba(0,0,0,0.7);
}
.cas-mini-die i { border-radius: 50%; }
.cas-mini-die i:nth-child(1), .cas-mini-die i:nth-child(3), .cas-mini-die i:nth-child(5), .cas-mini-die i:nth-child(7), .cas-mini-die i:nth-child(9) { background: hsl(272 40% 8%); }
.aaa-q-enhanced .cas-door:hover .cas-mini-die { animation: mini-die 0.9s cubic-bezier(0.34,1.2,0.64,1) infinite; }
@keyframes mini-die { 0%,100% { transform: rotate(0) translateY(0); } 40% { transform: rotate(-24deg) translateY(-14px); } 70% { transform: rotate(18deg) translateY(-6px); } }

/* Wheel */
.cas-mini-wheel {
  width: 66px; height: 66px; border-radius: 50%;
  background: conic-gradient(
    hsl(272 30% 14%) 0 18deg, hsl(160 60% 26%) 18deg 36deg, hsl(272 30% 14%) 36deg 54deg, hsl(160 60% 26%) 54deg 72deg,
    hsl(272 30% 14%) 72deg 90deg, hsl(275 60% 34%) 90deg 108deg, hsl(272 30% 14%) 108deg 126deg, hsl(45 90% 45%) 126deg 144deg,
    hsl(272 30% 14%) 144deg 162deg, hsl(160 60% 26%) 162deg 180deg, hsl(272 30% 14%) 180deg 198deg, hsl(275 60% 34%) 198deg 216deg,
    hsl(272 30% 14%) 216deg 234deg, hsl(160 60% 26%) 234deg 252deg, hsl(272 30% 14%) 252deg 270deg, hsl(160 60% 26%) 270deg 288deg,
    hsl(272 30% 14%) 288deg 360deg);
  border: 3px solid hsl(45 85% 60%); box-shadow: 0 0 0 2px hsl(272 34% 6%), 0 8px 18px rgba(0,0,0,0.7);
  position: relative;
}
.cas-mini-wheel::after { content: ""; position: absolute; inset: 22px; border-radius: 50%; background: hsl(272 34% 6%); border: 2px solid hsl(45 85% 60%); }
.aaa-q-enhanced .cas-door:hover .cas-mini-wheel { animation: mini-wheel 2.4s cubic-bezier(0.2,0.8,0.2,1) infinite; }
@keyframes mini-wheel { to { transform: rotate(720deg); } }

/* Cards */
.cas-mini-cards { gap: 0; }
.cas-mini-cards i {
  display: grid; place-items: center; width: 34px; height: 46px; border-radius: 5px; margin: 0 -6px;
  font-style: normal; font-size: 1rem; color: hsl(272 40% 12%);
  background: linear-gradient(160deg, #fff, hsl(0 0% 88%)); border: 1.5px solid hsl(45 80% 58% / 0.55);
  box-shadow: 0 6px 14px rgba(0,0,0,0.6);
}
.cas-mini-cards i:nth-child(1) { transform: rotate(-12deg) translateY(4px); }
.cas-mini-cards i:nth-child(3) { transform: rotate(12deg) translateY(4px); }
.cas-mini-cards i:nth-child(2) { color: hsl(0 70% 45%); z-index: 1; }
.aaa-q-enhanced .cas-door:hover .cas-mini-cards i:nth-child(2) { animation: mini-card 1s var(--aaa-e-settle) infinite alternate; }
@keyframes mini-card { from { transform: translateY(0); } to { transform: translateY(-10px); } }

/* Closed tables keep the miniature dim, and still. */
.cas-door.is-closed .cas-mini { opacity: 0.35; filter: grayscale(0.8); }
.cas-door.is-closed:hover .cas-mini, .cas-door.is-closed:hover .cas-mini * { animation: none !important; transform: translateX(-50%); }
@media (prefers-reduced-motion: reduce) { .cas-mini, .cas-mini * { animation: none !important; } }

/* The miniature die's pips lost to a more specific rule: `.cas-mini-die i`
   sets a radius but the nth-child fills need to beat `.cas-mini-die i` and
   the generic reset. Make the pattern explicit and unambiguous — a five. */
.cas-mini-die i { background: transparent; }
.cas-mini-die i:nth-child(1), .cas-mini-die i:nth-child(3), .cas-mini-die i:nth-child(5),
.cas-mini-die i:nth-child(7), .cas-mini-die i:nth-child(9) { background: hsl(272 40% 8%) !important; box-shadow: inset 0 1px 2px rgba(0,0,0,0.5); }


/* ══════════════════════════════════════════════════════════════════════
   THE HERO, on the owner's painted floor. Full-bleed: the source already
   fades to black on the left, so the art fills the frame and the copy sits
   on the dark it was painted with. Anchored right so the Don never leaves.
   ══════════════════════════════════════════════════════════════════════ */
.cas-hero { min-height: clamp(460px, 50vw, 620px); }
.cas-hero-art {
  inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 100% 50%;
  transform: none;
}
@keyframes cas-hero-drift { from { transform: scale(1) translate3d(0,0,0); } to { transform: scale(1.04) translate3d(-0.8%,-0.5%,0); } }
/* The image carries its own left fade; the veil only guards legibility on
   the copy column and grounds the bottom band. */
.cas-hero-veil {
  background:
    linear-gradient(90deg, hsl(272 40% 5% / 0.82) 0%, hsl(272 40% 5% / 0.55) 30%, transparent 52%),
    linear-gradient(180deg, transparent 0%, transparent 70%, hsl(272 40% 5% / 0.85) 100%);
}
.cas-hero::before { display: none; }   /* no synthetic wall light — the painting has its own */

@media (max-width: 900px) {
  /* Portrait: the Don is on the right of a wide painting; anchor there. */
  .cas-hero-art { aspect-ratio: 1828 / 860; height: auto; object-position: 88% 50%; }
  .cas-hero-veil { height: auto; aspect-ratio: 1828 / 860; max-height: none;
    background: linear-gradient(180deg, transparent 0%, transparent 40%, hsl(272 40% 6% / 0.75) 70%, hsl(272 40% 6%) 100%); }
  .cas-hero-copy { margin-top: -22vw; }
}


/* ══════════════════════════════════════════════════════════════════════
   THE NEON TRACK. The dotted ring is now a track and a purple light runs it
   — top edge left→right, right edge down, bottom edge right→left, left edge
   up — one lap every 6s. Four runners, each a translating gradient on its own
   edge, staggered so exactly one is lit at a time. Transform + opacity only.
   ══════════════════════════════════════════════════════════════════════ */
.cas-bulbs, .cas-chase { display: none; }
.cas-track {
  position: absolute; inset: 11px; border-radius: 22px;
  border: 2px solid hsl(275 80% 60% / 0.28);
  box-shadow: 0 0 14px hsl(275 85% 60% / 0.18), inset 0 0 14px hsl(275 85% 60% / 0.12);
}
.cas-run {
  position: absolute; will-change: transform, opacity; opacity: 0;
  filter: drop-shadow(0 0 8px hsl(275 100% 70%)) drop-shadow(0 0 18px hsl(275 100% 65% / 0.8));
}
/* horizontal runners */
.cas-run-t, .cas-run-b { height: 4px; width: 22%; left: 11px; }
.cas-run-t { top: 10px; background: linear-gradient(90deg, transparent, hsl(280 100% 80%), hsl(275 100% 70%), transparent); }
.cas-run-b { bottom: 10px; background: linear-gradient(90deg, transparent, hsl(275 100% 70%), hsl(280 100% 80%), transparent); }
/* vertical runners */
.cas-run-r, .cas-run-l { width: 4px; height: 34%; top: 11px; }
.cas-run-r { right: 10px; background: linear-gradient(180deg, transparent, hsl(280 100% 80%), hsl(275 100% 70%), transparent); }
.cas-run-l { left: 10px;  background: linear-gradient(180deg, transparent, hsl(275 100% 70%), hsl(280 100% 80%), transparent); }

/* One 6s lap. Each edge owns a quarter; the runner is visible only in its
   quarter and travels its full edge in that time. Percent widths mean the
   travel distances are exact regardless of the hero's size. */
@keyframes cas-lap-t { 0%   { opacity:1; transform: translate3d(-100%,0,0); } 25%  { opacity:1; transform: translate3d(calc(100% / 0.22 * 1.0),0,0); } 25.01%,100% { opacity:0; } }
@keyframes cas-lap-r { 0%,24.99% { opacity:0; } 25%  { opacity:1; transform: translate3d(0,-100%,0); } 50%  { opacity:1; transform: translate3d(0,calc(100% / 0.34 * 1.0),0); } 50.01%,100% { opacity:0; } }
@keyframes cas-lap-b { 0%,49.99% { opacity:0; } 50%  { opacity:1; transform: translate3d(calc(100% / 0.22 * 1.0),0,0); } 75%  { opacity:1; transform: translate3d(-100%,0,0); } 75.01%,100% { opacity:0; } }
@keyframes cas-lap-l { 0%,74.99% { opacity:0; } 75%  { opacity:1; transform: translate3d(0,calc(100% / 0.34 * 1.0),0); } 100% { opacity:1; transform: translate3d(0,-100%,0); } }
.aaa-q-enhanced .cas-run-t, .aaa-q-standard .cas-run-t { animation: cas-lap-t 6s linear infinite; }
.aaa-q-enhanced .cas-run-r, .aaa-q-standard .cas-run-r { animation: cas-lap-r 6s linear infinite; }
.aaa-q-enhanced .cas-run-b, .aaa-q-standard .cas-run-b { animation: cas-lap-b 6s linear infinite; }
.aaa-q-enhanced .cas-run-l, .aaa-q-standard .cas-run-l { animation: cas-lap-l 6s linear infinite; }

/* The title, without props: CASINO stands alone, a touch larger. */
.cas-title-row { display: block; }
.cas-title-word { font-size: clamp(3.2rem, 9vw, 7.2rem); }

/* ══════════════════════════════════════════════════════════════════════
   THE BANKROLL — a hero number, gamified.
   ══════════════════════════════════════════════════════════════════════ */
.cas-bank {
  position: relative; display: grid; gap: 0.15rem; justify-items: start;
  margin-top: 0.9rem; padding: 0.8rem 1.3rem 0.75rem 1.1rem;
  border-radius: 18px; border: 1px solid transparent;
  background:
    linear-gradient(180deg, hsl(45 40% 12% / 0.9), hsl(275 30% 8% / 0.9)) padding-box,
    linear-gradient(120deg, hsl(45 100% 62% / 0.85), hsl(275 80% 60% / 0.55) 60%, hsl(45 90% 55% / 0.6)) border-box;
  box-shadow: 0 14px 40px rgba(0,0,0,0.6), 0 0 34px hsl(45 100% 55% / 0.16), inset 0 1px 0 hsl(45 90% 70% / 0.18);
  overflow: hidden;
}
.cas-bank::before {
  content: ""; position: absolute; inset: -60%; z-index: 0; pointer-events: none;
  background: conic-gradient(from 0deg, transparent, hsl(45 100% 60% / 0.14) 20deg, transparent 40deg, transparent 180deg, hsl(45 100% 60% / 0.14) 200deg, transparent 220deg);
  animation: cas-spin 14s linear infinite;
}
.cas-bank > * { position: relative; z-index: 1; }
.cas-bank-k {
  font-family: var(--font-display); font-weight: 800; font-size: 0.5rem;
  letter-spacing: 0.3em; text-transform: uppercase; color: hsl(45 70% 66%);
}
.cas-bank-v {
  display: inline-flex; align-items: baseline; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 900; line-height: 1;
}
.cas-bank-v .cc-icon { width: 30px; height: 30px; align-self: center; filter: drop-shadow(0 0 10px hsl(45 100% 60% / 0.7)); }
.cas-bank-v b {
  font-size: clamp(2rem, 4.6vw, 3.1rem); font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  background: linear-gradient(180deg, #fff 10%, hsl(48 100% 72%) 55%, hsl(42 100% 58%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px hsl(45 100% 55% / 0.5));
}
.cas-bank-v i { font-style: normal; font-size: 0.9rem; letter-spacing: 0.14em; color: hsl(45 90% 68%); }
.cas-bank-s { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--aaa-mono); font-size: 0.74rem; color: var(--aaa-ink-3); }
.cas-bank-s .ac-icon { width: 14px; height: 14px; }
.cas-bank-s b { color: hsl(185 100% 70%); }
/* The number lights when it moves. */
.cas-bank.is-up   { box-shadow: 0 14px 40px rgba(0,0,0,0.6), 0 0 50px hsl(160 100% 50% / 0.35); }
.cas-bank.is-up   .cas-bank-v b { filter: drop-shadow(0 0 26px hsl(160 100% 55% / 0.8)); }
.cas-bank.is-down .cas-bank-v b { filter: drop-shadow(0 0 18px hsl(2 90% 60% / 0.6)); }
.cas-hero .cas-live { margin-top: 0.7rem; }

@media (max-width: 720px) {
  .cas-run-t, .cas-run-b { width: 34%; }
  .cas-run-r, .cas-run-l { height: 26%; }
  @keyframes cas-lap-t { 0% { opacity:1; transform: translate3d(-100%,0,0); } 25% { opacity:1; transform: translate3d(calc(100% / 0.34),0,0); } 25.01%,100% { opacity:0; } }
  @keyframes cas-lap-b { 0%,49.99% { opacity:0; } 50% { opacity:1; transform: translate3d(calc(100% / 0.34),0,0); } 75% { opacity:1; transform: translate3d(-100%,0,0); } 75.01%,100% { opacity:0; } }
  @keyframes cas-lap-r { 0%,24.99% { opacity:0; } 25% { opacity:1; transform: translate3d(0,-100%,0); } 50% { opacity:1; transform: translate3d(0,calc(100% / 0.26),0); } 50.01%,100% { opacity:0; } }
  @keyframes cas-lap-l { 0%,74.99% { opacity:0; } 75% { opacity:1; transform: translate3d(0,calc(100% / 0.26),0); } 100% { opacity:1; transform: translate3d(0,-100%,0); } }
}
@media (prefers-reduced-motion: reduce) {
  .cas-run { animation: none !important; opacity: 0; }
  .cas-bank::before { animation: none; }
}

/* The lap stalled: calc(100% / 0.22) inside translate3d does not resolve the
   way I assumed and the right runner froze lit. Simpler and exact — each
   runner is the full length of its edge and slides a lit segment along
   itself with a moving gradient position, so nothing depends on percent-of-
   self transforms. Opacity gates which edge is live. */
.cas-run-t, .cas-run-b { width: calc(100% - 22px); left: 11px; height: 4px; }
.cas-run-r, .cas-run-l { height: calc(100% - 22px); top: 11px; width: 4px; }
.cas-run-t { background: linear-gradient(90deg, transparent 0 40%, hsl(280 100% 80%) 50%, transparent 60% 100%) no-repeat; background-size: 300% 100%; }
.cas-run-b { background: linear-gradient(90deg, transparent 0 40%, hsl(280 100% 80%) 50%, transparent 60% 100%) no-repeat; background-size: 300% 100%; }
.cas-run-r { background: linear-gradient(180deg, transparent 0 40%, hsl(280 100% 80%) 50%, transparent 60% 100%) no-repeat; background-size: 100% 300%; }
.cas-run-l { background: linear-gradient(180deg, transparent 0 40%, hsl(280 100% 80%) 50%, transparent 60% 100%) no-repeat; background-size: 100% 300%; }
@keyframes cas-lap-t { 0% { opacity:1; background-position: 100% 0; } 25% { opacity:1; background-position: 0% 0; } 25.01%,100% { opacity:0; background-position: 0% 0; } }
@keyframes cas-lap-r { 0%,24.99% { opacity:0; background-position: 0 100%; } 25% { opacity:1; background-position: 0 100%; } 50% { opacity:1; background-position: 0 0%; } 50.01%,100% { opacity:0; } }
@keyframes cas-lap-b { 0%,49.99% { opacity:0; background-position: 0% 0; } 50% { opacity:1; background-position: 0% 0; } 75% { opacity:1; background-position: 100% 0; } 75.01%,100% { opacity:0; } }
@keyframes cas-lap-l { 0%,74.99% { opacity:0; background-position: 0 0%; } 75% { opacity:1; background-position: 0 0%; } 100% { opacity:1; background-position: 0 100%; } }
@media (max-width: 720px) {
  @keyframes cas-lap-t { 0% { opacity:1; background-position: 100% 0; } 25% { opacity:1; background-position: 0% 0; } 25.01%,100% { opacity:0; } }
  @keyframes cas-lap-r { 0%,24.99% { opacity:0; } 25% { opacity:1; background-position: 0 100%; } 50% { opacity:1; background-position: 0 0%; } 50.01%,100% { opacity:0; } }
  @keyframes cas-lap-b { 0%,49.99% { opacity:0; } 50% { opacity:1; background-position: 0% 0; } 75% { opacity:1; background-position: 100% 0; } 75.01%,100% { opacity:0; } }
  @keyframes cas-lap-l { 0%,74.99% { opacity:0; } 75% { opacity:1; background-position: 0 0%; } 100% { opacity:1; background-position: 0 100%; } }
}

/* Owner: no white light through the S. The foil sweep across CASINO is off. */
.cas-title-word .cas-foil, .cas-foil { display: none !important; animation: none !important; }


/* ══════════════════════════════════════════════════════════════════════
   YOUR STANDING — the player's card at the house.
   ══════════════════════════════════════════════════════════════════════ */
.cas-lower { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--aaa-gap); }
@media (max-width: 900px) { .cas-lower { grid-template-columns: 1fr; } }
.cas-lower .aaa-panel { padding: 0; overflow: hidden; }
.cas-me { display: grid; }
.cas-me-hero {
  position: relative; display: grid; gap: 0.2rem; justify-items: start;
  padding: 1.1rem 1.2rem 1rem;
  background:
    radial-gradient(90% 120% at 100% 0%, hsl(45 90% 50% / 0.16), transparent 60%),
    linear-gradient(180deg, hsl(275 30% 11%), hsl(272 30% 8%));
  border-bottom: 1px solid hsl(45 80% 58% / 0.25);
  overflow: hidden;
}
.cas-me-hero::after {
  content: ""; position: absolute; inset: -60%; z-index: 0; pointer-events: none;
  background: conic-gradient(from 0deg, transparent, hsl(45 100% 60% / 0.12) 20deg, transparent 40deg, transparent 180deg, hsl(45 100% 60% / 0.12) 200deg, transparent 220deg);
  animation: cas-spin 16s linear infinite;
}
.cas-me-hero > * { position: relative; z-index: 1; }
.cas-me-k { font-family: var(--font-display); font-weight: 800; font-size: 0.5rem; letter-spacing: 0.3em; text-transform: uppercase; color: hsl(45 70% 66%); }
.cas-me-big { display: inline-flex; align-items: baseline; gap: 0.4rem; font-family: var(--font-display); font-weight: 900; line-height: 1; }
.cas-me-big b {
  font-size: clamp(2rem, 4.4vw, 2.9rem); font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 10%, hsl(48 100% 72%) 55%, hsl(42 100% 58%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 20px hsl(45 100% 55% / 0.5));
}
.cas-me-big i { font-style: normal; font-size: 0.8rem; letter-spacing: 0.14em; color: hsl(45 90% 68%); }
.cas-me-sub { font-size: 0.82rem; color: var(--aaa-ink-2); }
.cas-me-sub b { color: var(--aaa-ink-1); }
.cas-me-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: hsl(250 20% 18% / 0.5);
  border-bottom: 1px solid var(--aaa-hairline);
}
.cas-me-stats span { display: grid; gap: 0.1rem; justify-items: center; padding: 0.7rem 0.4rem; background: hsl(255 26% 8%); text-align: center; }
.cas-me-stats b { font-family: var(--font-display); font-weight: 900; font-size: 0.95rem; color: hsl(45 95% 70%); font-variant-numeric: tabular-nums; }
.cas-me-stats i { font-style: normal; font-family: var(--font-display); font-weight: 800; font-size: 0.44rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--aaa-ink-3); }
.cas-me-tables { display: grid; }
.cas-me-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(60px, 1.2fr) auto; gap: 0.7rem; align-items: center;
  padding: 0.6rem 1.1rem; border-bottom: 1px solid var(--aaa-hairline);
}
.cas-me-row:last-child { border-bottom: 0; }
.cas-me-ico { font-size: 1.1rem; }
.cas-me-name { display: grid; font-size: 0.86rem; font-weight: 600; color: var(--aaa-ink-1); }
.cas-me-name small { font-size: 0.7rem; color: var(--aaa-ink-3); font-weight: 400; }
.cas-me-bar { height: 6px; border-radius: 3px; background: hsl(250 20% 14%); overflow: hidden; }
.cas-me-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, hsl(45 100% 55%), hsl(45 100% 70%)); box-shadow: 0 0 10px hsl(45 100% 55% / 0.5); }
.cas-me-cc { font-family: var(--font-display); font-weight: 900; font-size: 0.86rem; color: hsl(45 95% 70%); font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════════════
   RECENT SETTLEMENTS — the floor's ledger.
   ══════════════════════════════════════════════════════════════════════ */
.cas-settle { display: grid; }
.cas-led-row {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 0.7rem; align-items: center;
  padding: 0.62rem 1.1rem; border-bottom: 1px solid var(--aaa-hairline);
  animation: cas-led-in 420ms cubic-bezier(0.16,1,0.3,1) both; animation-delay: calc(var(--i) * 40ms);
}
@keyframes cas-led-in { from { opacity: 0; transform: translate3d(-8px,0,0); } to { opacity: 1; transform: none; } }
.cas-led-row:last-child { border-bottom: 0; }
.cas-led-ico { font-size: 1.15rem; width: 1.5rem; text-align: center; }
.cas-led-who { display: grid; font-size: 0.86rem; }
.cas-led-who b { color: var(--aaa-ink-1); }
.cas-led-who small { font-size: 0.7rem; color: var(--aaa-ink-3); }
.cas-led-mult { font-family: var(--font-display); font-weight: 800; font-size: 0.66rem; color: var(--aaa-ink-2); padding: 0.2rem 0.5rem; border-radius: 999px; background: hsl(250 22% 12%); border: 1px solid hsl(250 20% 22%); }
.cas-led-cc { font-family: var(--font-display); font-weight: 900; font-size: 0.92rem; color: hsl(160 90% 62%); font-variant-numeric: tabular-nums; text-shadow: 0 0 10px hsl(160 100% 55% / 0.35); }
.cas-led-cc i { font-style: normal; font-size: 0.6rem; margin-left: 0.2rem; opacity: 0.8; }
.cas-led-row.is-jackpot .cas-led-mult { color: hsl(45 90% 12%); background: linear-gradient(100deg, hsl(45 100% 64%), hsl(38 100% 54%)); border-color: transparent; }
.cas-led-row.is-jackpot .cas-led-cc { color: hsl(45 95% 70%); text-shadow: 0 0 14px hsl(45 100% 55% / 0.5); }
.cas-led-row.is-top { background: linear-gradient(90deg, hsl(45 90% 50% / 0.1), transparent 70%); }
.cas-led-crown { position: absolute; right: 0.6rem; top: -0.35rem; font-size: 0.9rem; filter: drop-shadow(0 0 8px hsl(45 100% 55% / 0.7)); }
@media (max-width: 560px) {
  .cas-me-stats { grid-template-columns: repeat(2, 1fr); }
  .cas-me-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .cas-me-bar { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cas-led-row { animation: none; } .cas-me-hero::after { animation: none; } }


/* Net position and the honest ledger, when the house serves it. */
.cas-me-net {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: hsl(250 20% 18% / 0.5); border-bottom: 1px solid var(--aaa-hairline);
}
.cas-me-net span { display: grid; gap: 0.1rem; justify-items: center; padding: 0.6rem 0.4rem; background: hsl(255 26% 8%); text-align: center; }
.cas-me-net b { font-family: var(--font-display); font-weight: 900; font-size: 0.9rem; color: var(--aaa-ink-1); font-variant-numeric: tabular-nums; }
.cas-me-net i { font-style: normal; font-family: var(--font-display); font-weight: 800; font-size: 0.42rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--aaa-ink-3); }
.cas-me-net.is-up   .cas-me-netv b { color: hsl(160 90% 62%); text-shadow: 0 0 10px hsl(160 100% 55% / 0.4); }
.cas-me-net.is-down .cas-me-netv b { color: hsl(2 85% 66%); text-shadow: 0 0 10px hsl(2 90% 60% / 0.4); }
.cas-me-ledger { border-top: 1px solid var(--aaa-hairline); }
.cas-me-lk { margin: 0; padding: 0.55rem 1.1rem 0.2rem; font-family: var(--font-display); font-weight: 800; font-size: 0.48rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--aaa-ink-3); }
.cas-me-hand { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 0.7rem; align-items: center; padding: 0.45rem 1.1rem; font-size: 0.84rem; border-bottom: 1px solid var(--aaa-hairline); }
.cas-me-hand:last-child { border-bottom: 0; }
.cas-me-hand span:nth-child(2) { display: grid; color: var(--aaa-ink-1); }
.cas-me-hand small { font-size: 0.68rem; color: var(--aaa-ink-3); }
.cas-me-hand b { font-family: var(--font-display); font-weight: 900; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.cas-me-hand.is-win b  { color: hsl(160 90% 62%); }
.cas-me-hand.is-loss b { color: hsl(2 85% 66%); }
.cas-me-hand.is-loss  { background: linear-gradient(90deg, hsl(2 70% 40% / 0.06), transparent 60%); }
@media (max-width: 560px) { .cas-me-net { grid-template-columns: repeat(2, 1fr); } }


/* ── Losses on the floor, in red ─────────────────────────────────────── */
.cas-led-row.is-lost { background: linear-gradient(90deg, hsl(2 70% 40% / 0.07), transparent 65%); }
.cas-led-row.is-lost .cas-led-cc { color: hsl(2 85% 66%); text-shadow: 0 0 10px hsl(2 90% 60% / 0.3); }
.cas-led-row.is-lost .cas-led-mult { color: hsl(2 60% 62%); background: hsl(2 40% 14%); border-color: hsl(2 45% 26%); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; }
.cas-led-row.is-lost .cas-led-ico { filter: grayscale(0.6) brightness(0.8); }
.cas-strip-item.is-lost em { color: hsl(2 85% 66%); text-shadow: 0 0 10px hsl(2 90% 60% / 0.28); }
.cas-strip-item.is-lost i { filter: grayscale(0.6) brightness(0.8); }
.cas-live-cc.is-lost { color: hsl(2 85% 68%); }


/* ══════════════════════════════════════════════════════════════════════
   THE DOORS — every table reports its own floor.
   Figures come from the settled feed the page already loads. A table nobody
   has played says so rather than showing a zero.
   ══════════════════════════════════════════════════════════════════════ */
.cas-door-stats {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1px;
  margin: 0.6rem -0.9rem 0.1rem; padding: 0;
  background: hsl(250 20% 20% / 0.6);
  border-top: 1px solid var(--aaa-hairline);
  border-bottom: 1px solid var(--aaa-hairline);
}
.cas-stat {
  display: grid; gap: 0.05rem; justify-items: center; text-align: center;
  padding: 0.45rem 0.3rem; background: hsl(272 30% 8%);
}
.cas-stat b {
  font-family: var(--font-display); font-weight: 900; font-size: 0.82rem; line-height: 1;
  color: var(--aaa-ink-1); font-variant-numeric: tabular-nums;
}
.cas-stat i {
  font-style: normal; font-family: var(--font-display); font-weight: 800;
  font-size: 0.4rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--aaa-ink-3);
}
.cas-stat.is-top b { color: hsl(45 95% 70%); text-shadow: 0 0 12px hsl(45 100% 55% / 0.45); }
.cas-stat.is-mine b { color: hsl(160 90% 64%); text-shadow: 0 0 12px hsl(160 100% 55% / 0.4); }
.cas-stat.is-quiet { grid-column: 1 / -1; }
.cas-stat.is-quiet b { color: var(--aaa-ink-3); font-size: 0.72rem; }

/* A table running hot wears it. */
.cas-door.is-hot { border-color: transparent; }
.cas-door.is-hot::after {
  content: "HOT"; position: absolute; z-index: 4; top: 0.6rem; right: 0.6rem;
  padding: 0.22rem 0.5rem; border-radius: 999px;
  font-family: var(--font-display); font-weight: 900; font-size: 0.46rem; letter-spacing: 0.18em;
  color: hsl(14 90% 10%); background: linear-gradient(100deg, hsl(38 100% 62%), hsl(14 95% 55%));
  box-shadow: 0 0 16px hsl(20 100% 55% / 0.7);
}
.aaa-q-enhanced .cas-door.is-hot::after { animation: cas-hot 1.6s var(--aaa-e-settle) infinite; }
@keyframes cas-hot { 0%,100% { transform: scale(1); } 50% { transform: scale(1.09); } }

/* The plinth reads as a machine's nameplate, not a paragraph. */
.cas-door-body { padding: 0.9rem 0.9rem 1rem; gap: 0.3rem; }
.cas-door-name {
  align-self: stretch; text-align: center;
  padding: 0.4rem 0.6rem; border-radius: 8px;
  background: linear-gradient(180deg, hsl(45 40% 14%), hsl(272 30% 9%));
  border: 1px solid hsl(45 80% 58% / 0.45);
  box-shadow: inset 0 1px 0 hsl(45 90% 70% / 0.18);
  color: hsl(45 95% 78%); font-size: 0.78rem; letter-spacing: 0.12em;
}
.cas-door-desc { font-size: 0.72rem; line-height: 1.35; color: var(--aaa-ink-3); min-height: 2.6em; }
.cas-door-facts { gap: 0.25rem; margin-top: 0.1rem; }
.cas-door-facts .aaa-chip { font-size: 0.52rem; }
.cas-door-cta { margin-top: 0.5rem; }
.cas-door.is-closed .cas-door-stats { opacity: 0.4; }
@media (prefers-reduced-motion: reduce) { .cas-door.is-hot::after { animation: none; } }

/* The stats rail now says what the miniature was gesturing at, and the
   miniature was covering the painted art to do it. The poster speaks. */
.cas-mini { display: none !important; }

/* HOT sits clear of the poster's own title. */
.cas-door.is-hot::after { top: auto; bottom: 0.6rem; right: 0.6rem; }

/* HOT belongs where nothing else lives: the arch's top-left shoulder. The
   posters centre their own titles and the CTA owns the bottom. */
.cas-door.is-hot::after { top: 0.55rem; left: 0.55rem; right: auto; bottom: auto; }