/*
Theme Name: Pizza Fans Games
Theme URI: https://pizzafansgames.com
Author: Pizza Fans Games
Description: Pizza Fans Games cluster game with WooCommerce virtual coin packs.
Version: 2.0.1
*/
.slot-marquee span { overflow-wrap: anywhere; }
@media (max-width: 768px) {
  .cluster-machine .slot-marquee span { font-size: 18px; line-height: 1.1; }
}
:root {
  --night: #04091b;
  --deep: #081331;
  --ice: #d9fbff;
  --mist: #9bd8e8;
  --aurora: #26f0d0;
  --violet: #a873ff;
  --blue: #238aff;
  --line: rgba(185, 244, 255, .28);
  --glass: rgba(8, 25, 57, .72);
  --panel: rgba(9, 18, 44, .9);
  --text: #f3fbff;
  --muted: #a9c3d2;
  --shadow: 0 28px 90px rgba(0, 0, 0, .42);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.daily-coins { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.woocommerce { color: #f4f7e7; }
.woocommerce h2, .woocommerce h3 { font-size: 24px; margin-bottom: 1rem; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  min-height: 44px;
  padding: 10px;
  border: 1px solid #657365;
  border-radius: 4px;
  background: #101a13;
  color: #f4f7e7;
  font: inherit;
}
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered { color: #f4f7e7; line-height: 22px; }
.select2-dropdown, .select2-results__option { color: #142119; }
.woocommerce-checkout #payment { background: #15241a; border-radius: 4px; }
.woocommerce-checkout #payment div.payment_box { background: #dbe9d7; color: #18241a; }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: #dbe9d7; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce button.button.alt {
  min-height: 44px;
  padding: 12px 18px;
  background: #f7d85f;
  color: #152017;
  border-radius: 4px;
  font-weight: 800;
}
.woocommerce button.button.alt:hover, .woocommerce a.button:hover { background: #fff09a; color: #152017; }
.woocommerce-info, .woocommerce-message, .woocommerce-error { color: #16211a; }
.woocommerce table.shop_table { border-color: #657365; }
.woocommerce table.shop_table td, .woocommerce table.shop_table th { overflow-wrap: anywhere; }
.woocommerce form .form-row label { line-height: 1.7; }
@media (max-width: 768px) {
  .woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2,
  .woocommerce form .form-row-first, .woocommerce form .form-row-last { float: none; width: 100%; }
  .woocommerce h2, .woocommerce h3 { font-size: 21px; }
  .woocommerce table.shop_table { table-layout: fixed; width: 100%; }
  .woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 9px 6px; }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 20% 0%, rgba(38, 240, 208, .24), transparent 32rem),
    radial-gradient(circle at 85% 8%, rgba(168, 115, 255, .24), transparent 28rem),
    linear-gradient(180deg, #04091b 0%, #06101f 48%, #02050e 100%);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
.skip-link { position: absolute; left: -999px; top: 1rem; z-index: 20; }
.skip-link:focus { left: 1rem; background: var(--ice); color: var(--night); padding: .7rem 1rem; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: .8rem clamp(1rem, 4vw, 3.4rem);
  border-bottom: 1px solid var(--line);
  background: rgba(3, 8, 23, .78);
  backdrop-filter: blur(18px);
}
.brand-lockup { display: flex; align-items: center; gap: .8rem; text-decoration: none; min-width: 0; }
.brand-logo {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1.1rem;
  border: 1px solid rgba(217, 251, 255, .42);
  box-shadow: 0 0 30px rgba(38, 240, 208, .28);
  object-fit: cover;
  object-position: center;
}
.brand-logo-lockup {
  width: clamp(12.5rem, 19vw, 16.25rem);
  height: auto;
  max-height: 4rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
}
.brand-logo-combo {
  display: inline-flex;
  align-items: center;
  gap: .62rem;
  min-width: 0;
  color: #fff8bc;
}
.brand-logo-character {
  width: clamp(3.2rem, 5vw, 4.45rem);
  height: clamp(3.2rem, 5vw, 4.45rem);
  flex: 0 0 auto;
  border-radius: .7rem;
  object-fit: cover;
  object-position: center;
  box-shadow: 0 0 0 1px rgba(255, 240, 109, .28), 0 .45rem 1rem rgba(0, 0, 0, .34);
}
.brand-logo-type {
  display: grid;
  gap: .05rem;
  min-width: 0;
  line-height: .92;
  text-transform: uppercase;
  filter: drop-shadow(0 .16rem .2rem rgba(0, 0, 0, .6));
}
.brand-logo-type strong {
  display: block;
  color: #fff8bc;
  font-size: clamp(1.02rem, 2vw, 1.48rem);
  font-weight: 1000;
  letter-spacing: .035em;
  text-shadow: 0 .08em 0 rgba(91, 34, 15, .8), 0 0 .8rem rgba(255, 177, 59, .28);
  white-space: nowrap;
}
.brand-logo-type em {
  display: block;
  color: #bfffd0;
  font-size: clamp(.68rem, 1.2vw, .92rem);
  font-style: normal;
  font-weight: 1000;
  letter-spacing: .28em;
  white-space: nowrap;
}
.brand-lockup strong { display: block; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; }
.brand-lockup em { display: block; color: var(--muted); font-size: .75rem; font-style: normal; }
.site-nav { display: flex; justify-content: center; gap: .4rem; flex-wrap: wrap; }
.menu-toggle { display: none; }
.site-nav a, .header-cta, .primary-action, .secondary-action, .ghost-button, .stake-controls button, .aurora-form button {
  border: 1px solid var(--line);
  border-radius: .85rem;
  text-decoration: none;
  font-weight: 800;
}
.site-nav a { padding: .65rem .85rem; color: var(--muted); }
.site-nav a:hover { color: var(--ice); background: rgba(255,255,255,.06); }
.header-cta, .primary-action, .aurora-form button {
  padding: .78rem 1.05rem;
  color: #02121a;
  background: linear-gradient(135deg, var(--aurora), #d9fbff);
  box-shadow: 0 0 32px rgba(38, 240, 208, .24);
}
.hero {
  min-height: calc(100vh - 5rem);
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(20rem, 1.05fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(2rem, 7vw, 6rem) clamp(1rem, 5vw, 5rem) 2rem;
  overflow: hidden;
}
.hero-media {
  order: 2;
  min-height: min(54vw, 38rem);
  border: 1px solid var(--line);
  border-radius: 2.2rem .4rem 2.2rem .4rem;
  background:
    linear-gradient(90deg, rgba(4,9,27,.08), rgba(4,9,27,.58)),
    url("assets/aurora-hero.png") center / cover no-repeat;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.08);
}
.hero-copy { max-width: 46rem; }
.eyebrow {
  margin: 0 0 .8rem;
  color: var(--aurora);
  text-transform: uppercase;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .16em;
}
h1, h2 { margin: 0; line-height: 1.02; }
h1 { font-size: clamp(2.7rem, 7vw, 6.6rem); max-width: 11ch; }
.hero-lead, .page-hero p { color: var(--muted); font-size: clamp(1rem, 1.7vw, 1.25rem); max-width: 58rem; }
.age-line, .game-disclaimer, .form-disclaimer {
  margin: 1rem 0;
  padding: .9rem 1rem;
  border: 1px solid rgba(38, 240, 208, .42);
  background: rgba(38, 240, 208, .08);
  color: var(--ice);
  border-radius: .3rem 1rem .3rem 1rem;
  font-weight: 800;
}
.hero-actions, .controls-panel { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.primary-action, .secondary-action { display: inline-flex; padding: .9rem 1.1rem; }
.secondary-action, .ghost-button, .stake-controls button {
  color: var(--ice);
  background: rgba(255,255,255,.06);
  padding: .82rem 1rem;
}
.game-shell {
  margin: 0 clamp(1rem, 5vw, 5rem) clamp(2rem, 5vw, 5rem);
  border: 1px solid var(--line);
  border-radius: .6rem 2rem .6rem 2rem;
  background:
    radial-gradient(circle at 50% 0%, rgba(38,240,208,.18), transparent 28rem),
    linear-gradient(180deg, rgba(9,18,44,.92), rgba(5,10,26,.95));
  box-shadow: var(--shadow);
  padding: clamp(1rem, 3vw, 2rem);
}
.game-topbar {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 1rem;
  align-items: end;
  margin-bottom: 1rem;
}
.game-topbar h2 { font-size: clamp(1.8rem, 4vw, 3.2rem); }
.cluster-machine {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid rgba(217,251,255,.44);
  border-radius: 2.4rem .7rem 2.4rem .7rem;
  background:
    radial-gradient(circle at 50% -12%, rgba(255,255,255,.24), transparent 16rem),
    linear-gradient(135deg, rgba(255,255,255,.16), transparent 35%),
    linear-gradient(180deg, rgba(12, 39, 80, .92), rgba(2, 8, 24, .92));
  box-shadow:
    inset 0 0 90px rgba(38,240,208,.14),
    inset 0 -18px 48px rgba(0,0,0,.42),
    0 30px 120px rgba(0,0,0,.55);
}
.cluster-machine::before {
  content: "";
  position: absolute;
  inset: 1rem;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent, rgba(38,240,208,.16), transparent),
    radial-gradient(circle at 18% 18%, rgba(168,115,255,.18), transparent 16rem);
  animation: cabinetAurora 7s ease-in-out infinite alternate;
}
.cluster-fx {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.cabinet-crown {
  display: flex;
  justify-content: center;
  gap: .42rem;
  margin: -.4rem auto 1rem;
  pointer-events: none;
}
.cabinet-crown span {
  width: clamp(1rem, 2vw, 1.7rem);
  height: clamp(1rem, 2vw, 1.7rem);
  transform: rotate(45deg);
  border: 1px solid rgba(217,251,255,.8);
  border-radius: .24rem;
  background: linear-gradient(135deg, #f5feff, #36f1df 45%, #8b62ff);
  box-shadow: 0 0 22px rgba(38,240,208,.65);
  animation: crownPulse 1.8s ease-in-out infinite;
}
.cabinet-crown span:nth-child(2) {
  width: clamp(1.45rem, 2.8vw, 2.2rem);
  height: clamp(1.45rem, 2.8vw, 2.2rem);
  animation-delay: .16s;
}
.cabinet-crown span:nth-child(3) { animation-delay: .32s; }
.meter-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem;
  margin-bottom: 1rem;
}
.meter-row div, .info-bands article, .content-card, .contact-card, .profile-grid article {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.055);
  border-radius: 1rem;
}
.meter-row div { padding: .85rem; }
.meter-row span, .profile-grid span { display: block; color: var(--muted); font-size: .72rem; text-transform: uppercase; font-weight: 900; letter-spacing: .12em; }
.meter-row strong, .profile-grid strong { display: block; color: var(--ice); font-size: clamp(1.35rem, 3vw, 2.3rem); }
.reel-window {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(3.2rem, 1fr));
  gap: clamp(.45rem, 1.1vw, .86rem);
  padding: clamp(.65rem, 1.8vw, 1.25rem);
  border-radius: 1.65rem .45rem 1.65rem .45rem;
  background:
    linear-gradient(90deg, rgba(255,255,255,.1), transparent 9%, transparent 91%, rgba(255,255,255,.1)),
    linear-gradient(180deg, rgba(217,251,255,.18), rgba(255,255,255,.02)),
    #020817;
  border: 1px solid rgba(217,251,255,.42);
  box-shadow:
    inset 0 0 48px rgba(0,0,0,.68),
    inset 0 0 0 .45rem rgba(255,255,255,.035),
    0 0 58px rgba(38,240,208,.1);
}
.center-line {
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: 50%;
  z-index: 4;
  height: .18rem;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(217,251,255,.3), rgba(38,240,208,.95), rgba(217,251,255,.3), transparent);
  opacity: .55;
  box-shadow: 0 0 22px rgba(38,240,208,.62);
  pointer-events: none;
}
.cluster-machine.has-added .center-line {
  height: .34rem;
  opacity: 1;
  animation: linePulse .54s ease-in-out 3;
}
.reel-col {
  position: relative;
  overflow: hidden;
  min-width: 0;
  border-radius: 1rem .25rem 1rem .25rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.1), transparent 18%, transparent 82%, rgba(255,255,255,.08)),
    rgba(0,0,0,.24);
  box-shadow: inset 0 0 26px rgba(0,0,0,.42);
  transition: transform .22s ease, filter .22s ease;
}
.reel-col::before,
.reel-col::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 18%;
  z-index: 2;
  pointer-events: none;
}
.reel-col::before { top: 0; background: linear-gradient(180deg, rgba(1,7,20,.76), transparent); }
.reel-col::after { bottom: 0; background: linear-gradient(0deg, rgba(1,7,20,.76), transparent); }
.reel-col.is-spinning {
  filter: saturate(1.22) brightness(1.2);
  transform: translateY(.18rem) scale(1.01);
}
.reel-col.has-landed { animation: reelLand .24s cubic-bezier(.2, 1.7, .35, 1); }
.reel-strip {
  display: grid;
  gap: .55rem;
  will-change: transform, filter;
}
.reel-strip.strip-spin {
  animation: reelRush .38s linear infinite;
  filter: blur(1.2px);
}
.reel-strip.snap-stop { animation: reelSnap .32s cubic-bezier(.12, 1.8, .25, 1); }
.symbol {
  position: relative;
  aspect-ratio: 1 / .82;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(217,251,255,.38);
  border-radius: 1rem .22rem 1rem .22rem;
  background:
    radial-gradient(circle at 35% 20%, rgba(255,255,255,.58), transparent 18%),
    linear-gradient(145deg, rgba(38,240,208,.26), rgba(168,115,255,.18)),
    #071631;
  color: #eaffff;
  text-shadow: 0 0 18px rgba(38,240,208,.8);
  transform: translateZ(0);
}
.symbol::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 15%, rgba(255,255,255,.24), transparent 45%);
  transform: translateX(-130%);
  animation: symbolShine 3.8s ease-in-out infinite;
}
.symbol-glow {
  position: absolute;
  inset: 18%;
  border-radius: 999px;
  filter: blur(18px);
  opacity: .48;
  background: var(--aurora);
}
.symbol-glyph {
  position: relative;
  z-index: 1;
  font-size: clamp(1.55rem, 4.7vw, 4.1rem);
  line-height: 1;
  animation: glyphFloat 2.8s ease-in-out infinite;
}
.symbol small {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  padding: 0 .28rem .28rem;
  color: rgba(243,251,255,.72);
  font-size: clamp(.44rem, .8vw, .68rem);
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.symbol--star .symbol-glow,
.symbol--spark .symbol-glow { background: #8efcff; }
.symbol--crystal .symbol-glow,
.symbol--prism .symbol-glow { background: #a873ff; }
.symbol--snow .symbol-glow { background: #f2feff; }
.symbol--moon .symbol-glow { background: #7ab8ff; }
.symbol--rune .symbol-glow,
.symbol--mark .symbol-glow { background: #26f0d0; }
.symbol.is-highlighted {
  border-color: rgba(255,255,255,.95);
  box-shadow: 0 0 0 .12rem rgba(38,240,208,.52), 0 0 34px rgba(38,240,208,.5);
  animation: highlightTile .72s ease-in-out infinite alternate;
}
.controls-panel { justify-content: center; margin-top: 1rem; }
.stake-controls { display: flex; gap: .4rem; flex-wrap: wrap; }
.stake-controls button, .ghost-button, .spin-button { cursor: pointer; }
.stake-controls button.is-active { background: var(--ice); color: var(--night); }
.spin-button {
  border: 0;
  border-radius: 999px;
  padding: 1rem 1.6rem;
  color: #02121a;
  background: linear-gradient(135deg, #d9fbff, var(--aurora), var(--violet));
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .08em;
  box-shadow: 0 0 42px rgba(38,240,208,.38);
}
.spin-button:disabled { opacity: .6; cursor: progress; }
.result-panel {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: .9rem;
  background: rgba(38,240,208,.08);
  color: var(--ice);
  text-align: center;
  font-weight: 900;
}
.cluster-status {
  margin-top: .9rem;
  color: var(--muted);
  text-align: center;
  font-size: .84rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.info-bands {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 0 clamp(1rem, 5vw, 5rem) clamp(2rem, 5vw, 5rem);
}
.info-bands article { padding: 1.2rem; }
.info-bands span, .ledger article > span {
  color: var(--aurora);
  font-size: 1.4rem;
  font-weight: 1000;
}
.info-bands h2 { margin-top: .5rem; font-size: 1.25rem; }
.info-bands p, .ledger p, .contact-card p { color: var(--muted); }
.page-shell { padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 5vw, 5rem); }
.page-hero {
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid var(--line);
  border-radius: 2rem .5rem 2rem .5rem;
  background: linear-gradient(135deg, rgba(38,240,208,.12), rgba(168,115,255,.08)), var(--glass);
  box-shadow: var(--shadow);
}
.page-hero.compact h1 { font-size: clamp(2.2rem, 5vw, 4rem); max-width: 16ch; }
.ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.ledger article {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1rem;
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: .5rem 1.4rem .5rem 1.4rem;
  background: rgba(255,255,255,.055);
}
.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) .7fr;
  gap: 1rem;
  margin-top: 1rem;
}
.aurora-form, .form-note {
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: .5rem 1.4rem .5rem 1.4rem;
  background: var(--panel);
}
.aurora-form { display: grid; gap: 1rem; }
.aurora-form label { display: grid; gap: .4rem; color: var(--ice); font-weight: 900; }
.aurora-form input {
  width: 100%;
  min-height: 3rem;
  border: 1px solid var(--line);
  border-radius: .8rem;
  background: rgba(0,0,0,.24);
  color: var(--text);
  padding: .8rem 1rem;
  font: inherit;
}
.checkline { grid-template-columns: 1.2rem 1fr; align-items: start; }
.checkline input { min-height: auto; margin-top: .25rem; accent-color: var(--aurora); }
.form-message { color: var(--ice); background: rgba(168,115,255,.12); padding: .8rem; border: 1px solid rgba(168,115,255,.35); border-radius: .8rem; }
.contact-card, .content-card { margin-top: 1rem; padding: 1.4rem; }
.profile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
.profile-grid article { padding: 1.1rem; }
.site-footer {
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 5vw, 5rem);
  border-top: 1px solid var(--line);
  background: #02050e;
}
.footer-grid { display: grid; grid-template-columns: 1.1fr .8fr 1fr; gap: 1.2rem; }
.footer-grid h2 { font-size: 1rem; color: var(--ice); }
.footer-grid p, .footer-links a, .footer-bottom { color: var(--muted); }
.footer-links { display: grid; gap: .4rem; }
.footer-bottom { margin: 1.4rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.modal {
  max-width: min(92vw, 36rem);
  border: 1px solid var(--line);
  border-radius: 1.2rem;
  background: var(--deep);
  color: var(--text);
  padding: 1.5rem;
}
.modal::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(5px); }
.modal-close { float: right; border: 1px solid var(--line); background: rgba(255,255,255,.08); color: var(--ice); border-radius: .7rem; padding: .5rem .7rem; }
.age-popup { position: fixed; inset: 0; display: none; place-items: center; z-index: 30; background: rgba(0,0,0,.7); padding: 1rem; }
.age-popup.is-open { display: grid; }
.age-popup-panel {
  max-width: 34rem;
  border: 1px solid rgba(38,240,208,.45);
  border-radius: 1.3rem;
  background: linear-gradient(145deg, #081331, #030817);
  padding: 1.5rem;
  text-align: center;
  box-shadow: var(--shadow);
}
.age-popup-panel button {
  border: 0;
  border-radius: 999px;
  padding: .9rem 1.2rem;
  background: var(--aurora);
  color: var(--night);
  font-weight: 1000;
}
@keyframes cabinetAurora {
  from { transform: translateX(-6%); opacity: .72; }
  to { transform: translateX(6%); opacity: 1; }
}
@keyframes crownPulse {
  0%, 100% { transform: rotate(45deg) scale(.92); filter: brightness(.95); }
  50% { transform: rotate(45deg) scale(1.08); filter: brightness(1.3); }
}
@keyframes reelRush {
  from { transform: translateY(calc(var(--spin-distance, 1000px) * -1)); }
  to { transform: translateY(0); }
}
@keyframes reelSnap {
  0% { transform: translateY(-18%); }
  60% { transform: translateY(4%); }
  100% { transform: translateY(0); }
}
@keyframes reelLand {
  0% { transform: translateY(-.18rem) scale(1.03); }
  70% { transform: translateY(.12rem) scale(.995); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes linePulse {
  0%, 100% { transform: translateY(-50%) scaleX(.9); filter: brightness(1); }
  50% { transform: translateY(-50%) scaleX(1.02); filter: brightness(1.65); }
}
@keyframes symbolShine {
  0%, 48% { transform: translateX(-130%); }
  64%, 100% { transform: translateX(130%); }
}
@keyframes glyphFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-.08em) scale(1.04); }
}
@keyframes highlightTile {
  from { transform: scale(1); filter: brightness(1); }
  to { transform: scale(1.035); filter: brightness(1.25); }
}
@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr; }
  .site-nav { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .2rem; }
  .hero { grid-template-columns: 1fr; padding-top: 1.5rem; }
  .hero-media { order: 0; min-height: 18rem; }
  .game-topbar, .form-layout, .footer-grid, .ledger, .info-bands, .profile-grid { grid-template-columns: 1fr; }
  h1 { font-size: clamp(2.35rem, 14vw, 4.3rem); }
}
@media (max-width: 560px) {
  .brand-lockup span { min-width: 0; }
  .brand-lockup strong { font-size: .86rem; }
  .brand-lockup em { display: none; }
  .header-cta { width: 100%; justify-content: center; }
  .meter-row { grid-template-columns: 1fr; }
  .reel-window { gap: .32rem; padding: .45rem; }
  .symbol { border-radius: .55rem .12rem .55rem .12rem; }
  .symbol-glyph { font-size: clamp(1.25rem, 8vw, 2.4rem); }
  .symbol small { display: none; }
  .controls-panel { align-items: stretch; }
  .stake-controls, .spin-button, .ghost-button { width: 100%; }
  .stake-controls button { flex: 1; }
}

/* Pizza Fans Games cluster-game upgrade */
:root {
  --aurora: #71f765;
  --violet: #b05cff;
  --blue: #35d6ff;
  --flame: #ff9238;
  --leaf: #78f265;
  --forest-panel: rgba(9, 32, 32, .9);
}
.hero-media {
  background:
    linear-gradient(90deg, rgba(4, 17, 18, .08), rgba(4, 17, 18, .5)),
    url("assets/critter-hero.png") center / cover no-repeat;
}
.cluster-machine {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, 1.05fr) minmax(280px, .8fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: stretch;
  overflow: hidden;
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid rgba(154, 255, 168, .42);
  border-radius: 2.2rem .7rem 2.2rem .7rem;
  background:
    radial-gradient(circle at 18% 20%, rgba(113, 247, 101, .18), transparent 18rem),
    radial-gradient(circle at 88% 18%, rgba(176, 92, 255, .18), transparent 16rem),
    linear-gradient(180deg, rgba(10, 48, 40, .94), rgba(7, 14, 33, .96));
  box-shadow: inset 0 0 90px rgba(113, 247, 101, .12), 0 30px 120px rgba(0,0,0,.55);
}
.cluster-machine::before {
  content: "";
  position: absolute;
  inset: 1rem;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(53, 214, 255, .12), transparent),
    radial-gradient(circle at 50% 0%, rgba(255, 146, 56, .12), transparent 18rem);
  animation: cabinetAurora 6s ease-in-out infinite alternate;
}
.cluster-canvas {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 980px;
  aspect-ratio: 7 / 5;
  border: 1px solid rgba(217, 255, 220, .45);
  border-radius: 1.6rem .45rem 1.6rem .45rem;
  background: #07131f;
  box-shadow: inset 0 0 0 .45rem rgba(255,255,255,.04), inset 0 0 48px rgba(0,0,0,.6), 0 0 52px rgba(113,247,101,.16);
  touch-action: manipulation;
}
.cluster-side {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  gap: 1rem;
}
.cluster-side .meter-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}
.reactor-panel {
  border: 1px solid rgba(154, 255, 168, .35);
  border-radius: 1.1rem .35rem 1.1rem .35rem;
  padding: 1rem;
  background: rgba(0, 0, 0, .22);
}
.reactor-panel h3 {
  margin: 0 0 .8rem;
  color: var(--ice);
  text-transform: uppercase;
  font-size: .9rem;
  letter-spacing: .12em;
}
.charge-meter {
  display: grid;
  gap: .35rem;
  margin: .7rem 0;
  color: var(--muted);
  font-weight: 900;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.charge-meter i {
  display: block;
  overflow: hidden;
  height: .72rem;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
}
.charge-meter b {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  transition: width .34s ease;
  box-shadow: 0 0 20px currentColor;
}
.charge-meter.leaf b { background: var(--leaf); color: var(--leaf); }
.charge-meter.flame b { background: var(--flame); color: var(--flame); }
.charge-meter.water b { background: var(--blue); color: var(--blue); }
.charge-meter.storm b { background: var(--violet); color: var(--violet); }
.cluster-machine .controls-panel {
  justify-content: stretch;
  align-items: stretch;
}
.cluster-machine .stake-controls {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.cluster-machine .spin-button,
.cluster-machine .ghost-button {
  min-height: 3.2rem;
}
.cluster-machine .spin-button {
  background: linear-gradient(135deg, #f7ff8e, #71f765 42%, #35d6ff 100%);
}
.cluster-machine .result-panel,
.cluster-machine .cluster-status {
  text-align: left;
}
@media (max-width: 980px) {
  .cluster-machine { grid-template-columns: 1fr; }
  .cluster-side .meter-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .cluster-machine { padding: .72rem; border-radius: 1.3rem .35rem 1.3rem .35rem; }
  .cluster-side .meter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cluster-machine .stake-controls { grid-template-columns: repeat(3, 1fr); }
  .cluster-machine .stake-controls button { padding: .78rem .4rem; }
}

/* Production QA pass: flatter game skin, fewer generated-looking frames */
body {
  background: #07110d;
}
.site-header,
.site-footer {
  border: 0;
  box-shadow: none;
  background: rgba(7, 17, 13, .96);
}
.brand-lockup img {
  box-shadow: none;
}
.hero {
  min-height: auto;
}
.hero-media {
  min-height: clamp(20rem, 42vw, 34rem);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.hero-copy,
.game-shell,
.info-bands,
.content-page,
.game-info,
.registration-card,
.modal {
  border: 0;
  box-shadow: none;
}
.hero-copy {
  background: transparent;
}
.game-shell {
  max-width: none;
  margin: 0;
  padding: clamp(1rem, 4vw, 3rem);
  border-radius: 0;
  background: #09150f;
}
.cluster-machine {
  max-width: 1280px;
  margin-inline: auto;
  border: 0;
  border-radius: 0;
  background: #0d1b14;
  box-shadow: none;
}
.cluster-machine::before {
  display: none;
}
.cluster-canvas {
  border: 0;
  border-radius: 1.1rem;
  box-shadow: none;
  background: #091912;
}
.game-topbar,
.cluster-side,
.reactor-panel,
.result-panel,
.cluster-status,
.game-disclaimer,
.age-line,
.meter-row div,
.stake-controls,
.charge-meter i {
  border: 0;
  box-shadow: none;
}
.reactor-panel,
.result-panel,
.cluster-status,
.game-disclaimer,
.age-line {
  background: #112219;
  border-radius: .8rem;
}
.meter-row div {
  background: #112219;
  border-radius: .8rem;
}
.charge-meter i {
  background: #0a130f;
}
.primary-action,
.secondary-action,
.header-cta,
.spin-button,
.ghost-button,
.stake-controls button,
.age-popup-panel button {
  border: 0;
  box-shadow: none;
}
.spin-button:disabled {
  cursor: progress;
  filter: saturate(.7) brightness(.78);
}
.stake-controls button {
  background: #182b20;
}
.stake-controls button.is-active {
  background: #d7ff5f;
  color: #07110d;
}
.cluster-machine .spin-button {
  background: #d7ff5f;
  color: #07110d;
}
.cluster-machine .ghost-button,
.secondary-action {
  background: #182b20;
  color: #f5ffe9;
}
.cluster-machine .meter-row strong,
.cluster-machine .meter-row span,
.reactor-panel h3 {
  letter-spacing: .04em;
}
@media (max-width: 720px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .site-header {
    position: static;
  }
  .hero {
    padding-bottom: 1rem;
  }
  .hero-copy h1,
  h1 {
    font-size: clamp(2.15rem, 12vw, 3.55rem);
  }
  .cluster-machine {
    gap: .85rem;
    padding: .65rem;
  }
  .cluster-canvas {
    border-radius: .85rem;
  }
  .game-shell {
    padding-inline: .55rem;
  }
  .cluster-side .meter-row,
  .cluster-machine .stake-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cluster-machine .spin-button,
  .cluster-machine .ghost-button {
    min-height: 3rem;
  }
}

/* Classic slot cabinet pass */
.cluster-machine {
  grid-template-columns: minmax(330px, 1fr) minmax(260px, 360px);
  grid-template-areas:
    "marquee marquee"
    "grid side"
    "controls controls";
  gap: clamp(.8rem, 2vw, 1.25rem);
  padding: clamp(.8rem, 2.4vw, 1.6rem);
  border-radius: 1.35rem;
  background:
    linear-gradient(180deg, #27362d 0%, #0a1511 11%, #08100d 100%),
    #0a1511;
  box-shadow:
    inset 0 .18rem 0 rgba(255,255,255,.14),
    inset 0 -.35rem 0 rgba(0,0,0,.55),
    0 2rem 5rem rgba(0,0,0,.48);
}
.slot-marquee {
  grid-area: marquee;
  min-height: clamp(3.4rem, 8vw, 5.2rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem clamp(1rem, 3vw, 1.6rem);
  border-radius: 1rem 1rem .45rem .45rem;
  background:
    radial-gradient(circle at 12% 50%, rgba(255,240,109,.45), transparent 3.2rem),
    radial-gradient(circle at 88% 50%, rgba(75,228,255,.32), transparent 3.2rem),
    linear-gradient(90deg, #21180b, #5d2f11 22%, #0e2b22 62%, #111b31);
  box-shadow: inset 0 0 0 .12rem rgba(255,238,145,.34), 0 .8rem 1.6rem rgba(0,0,0,.3);
}
.slot-marquee span {
  color: #fff8bc;
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 1000;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 .08em 0 #5b220f, 0 0 1.1rem rgba(255,240,109,.45);
}
.slot-marquee i {
  color: #bfffd0;
  font-style: normal;
  font-size: clamp(.72rem, 1.4vw, .95rem);
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.cluster-canvas {
  grid-area: grid;
  align-self: stretch;
  aspect-ratio: 7 / 5;
  border-radius: .9rem;
  background: #050907;
  box-shadow:
    inset 0 0 0 .55rem #050907,
    inset 0 0 0 .75rem #b78a39,
    inset 0 0 3rem rgba(0,0,0,.82),
    0 1rem 2.4rem rgba(0,0,0,.42);
}
.cluster-side {
  grid-area: side;
  padding: .15rem;
}
.cluster-side .meter-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cluster-side .meter-row div,
.reactor-panel,
.cluster-status,
.result-panel {
  background: linear-gradient(180deg, #17241c, #0b1510);
  box-shadow: inset 0 .08rem 0 rgba(255,255,255,.08);
}
.controls-panel {
  grid-area: controls;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(11rem, .6fr) repeat(3, minmax(7rem, .38fr));
  align-items: stretch;
  gap: .7rem;
  padding: .75rem;
  border-radius: .55rem  .55rem 1rem 1rem;
  background:
    linear-gradient(180deg, #20251f, #070c09),
    #070c09;
  box-shadow: inset 0 .12rem 0 rgba(255,255,255,.1), inset 0 -.18rem 0 rgba(0,0,0,.8);
}
.cluster-machine .stake-controls {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .45rem;
}
.cluster-machine .stake-controls button,
.cluster-machine .ghost-button {
  border-radius: .45rem;
  background: linear-gradient(180deg, #26352c, #0f1813);
  color: #f4ffe9;
  box-shadow: inset 0 .08rem 0 rgba(255,255,255,.12), 0 .22rem 0 rgba(0,0,0,.45);
}
.cluster-machine .stake-controls button.is-active {
  background: linear-gradient(180deg, #fff7a8, #d7ff5f 58%, #8cc83d);
  color: #07110d;
}
.cluster-machine .spin-button {
  min-height: 4rem;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 18%, #ffffff, #fff06d 25%, #ff8a38 68%, #8d2412);
  color: #190807;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  text-transform: uppercase;
  letter-spacing: .04em;
  box-shadow: inset 0 .2rem 0 rgba(255,255,255,.42), inset 0 -.28rem 0 rgba(89,19,6,.54), 0 .55rem 0 #320d08, 0 0 1.6rem rgba(255,146,56,.28);
}
@media (max-width: 980px) {
  .cluster-machine {
    grid-template-columns: 1fr;
    grid-template-areas:
      "marquee"
      "grid"
      "side"
      "controls";
  }
  .controls-panel {
    grid-template-columns: 1fr 1fr;
  }
  .cluster-machine .stake-controls,
  .cluster-machine .spin-button {
    grid-column: 1 / -1;
  }
}
@media (max-width: 620px) {
  .slot-marquee {
    align-items: flex-start;
    flex-direction: column;
    gap: .35rem;
  }
  .cluster-machine {
    border-radius: .85rem;
    padding: .45rem;
  }
  .controls-panel {
    grid-template-columns: 1fr;
    padding: .55rem;
  }
  .cluster-machine .stake-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cluster-machine .spin-button {
    min-height: 3.6rem;
  }
}

/* Navigation and global polish pass */
.site-header {
  grid-template-columns: minmax(14rem, auto) minmax(0, 1fr) auto;
  gap: clamp(.7rem, 2vw, 1.2rem);
  padding: .72rem clamp(.85rem, 3.6vw, 3rem);
  background:
    linear-gradient(180deg, rgba(9, 17, 13, .96), rgba(6, 12, 9, .92)),
    #07110d;
  box-shadow: 0 .75rem 2.4rem rgba(0,0,0,.3);
  backdrop-filter: blur(16px);
}
.site-header::after {
  content: "";
  position: absolute;
  left: clamp(.85rem, 3.6vw, 3rem);
  right: clamp(.85rem, 3.6vw, 3rem);
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,240,109,.4), rgba(75,228,255,.32), transparent);
}
.brand-lockup {
  gap: .7rem;
  min-height: 3.5rem;
}
.brand-logo {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: .8rem;
  background: #101a13;
  box-shadow: 0 0 0 .12rem rgba(255,240,109,.18), 0 .55rem 1.2rem rgba(0,0,0,.34);
}
.brand-lockup strong {
  max-width: 14ch;
  font-size: .95rem;
  line-height: 1.05;
  color: #fff8bc;
}
.brand-lockup em {
  margin-top: .18rem;
  color: #9fc5ad;
  font-size: .72rem;
}
.site-nav {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  max-width: 100%;
  padding: .25rem;
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 .08rem 0 rgba(255,255,255,.08), inset 0 -.08rem 0 rgba(0,0,0,.26);
}
.site-nav a {
  min-height: 2.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .62rem .9rem;
  border: 0;
  border-radius: 999px;
  color: #dcefe1;
  font-size: .86rem;
  line-height: 1;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.site-nav a:first-child {
  color: #07110d;
  background: linear-gradient(180deg, #fff8bc, #d7ff5f);
}
.site-nav a:hover,
.site-nav a:focus-visible {
  color: #ffffff;
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
  outline: 0;
}
.site-nav a:first-child:hover,
.site-nav a:first-child:focus-visible {
  color: #07110d;
  background: linear-gradient(180deg, #ffffff, #fff06d);
}
.header-cta {
  min-height: 2.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .82rem 1.1rem;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 18%, #ffffff, #fff06d 34%, #ff9238 100%);
  color: #170806;
  font-size: .88rem;
  text-transform: uppercase;
  letter-spacing: .035em;
  box-shadow: inset 0 .14rem 0 rgba(255,255,255,.38), 0 .32rem 0 #4d160c, 0 0 1.2rem rgba(255,146,56,.24);
}
.header-cta:hover,
.header-cta:focus-visible {
  transform: translateY(-1px);
  outline: 0;
  filter: brightness(1.08);
}
.hero {
  background:
    radial-gradient(circle at 12% 18%, rgba(255,240,109,.12), transparent 20rem),
    radial-gradient(circle at 86% 22%, rgba(75,228,255,.12), transparent 24rem);
}
.hero-copy h1 {
  color: #fff8bc;
  text-shadow: 0 .08em 0 rgba(91,34,15,.72), 0 0 1.8rem rgba(255,240,109,.18);
}
.primary-action,
.secondary-action {
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}
.primary-action {
  background: linear-gradient(180deg, #fff8bc, #d7ff5f);
  color: #07110d;
}
.secondary-action {
  background: rgba(255,255,255,.08);
}
.info-bands article {
  border: 0;
  background: linear-gradient(180deg, #112219, #08100c);
  box-shadow: inset 0 .08rem 0 rgba(255,255,255,.08), 0 1rem 2.2rem rgba(0,0,0,.2);
}
.coin-pack-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.9rem, 2vw, 1.25rem);
  margin-top: 1.2rem;
}
.coin-store-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .62fr);
  gap: clamp(1rem, 3vw, 1.8rem);
  align-items: stretch;
  padding: clamp(1.1rem, 4vw, 2.4rem);
  border-radius: 1.1rem;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,240,109,.2), transparent 18rem),
    radial-gradient(circle at 86% 18%, rgba(75,228,255,.16), transparent 18rem),
    linear-gradient(135deg, #17241c, #07100c);
  box-shadow: inset 0 .1rem 0 rgba(255,255,255,.1), 0 1.4rem 3rem rgba(0,0,0,.28);
}
.coin-store-hero h1 {
  max-width: 12ch;
  color: #fff8bc;
  font-size: clamp(2.4rem, 8vw, 5.6rem);
  text-shadow: 0 .08em 0 rgba(91,34,15,.72), 0 0 1.8rem rgba(255,240,109,.18);
}
.coin-store-hero p {
  max-width: 48rem;
  color: #dcefe1;
}
.coin-store-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 1rem;
}
.coin-store-flow {
  padding: 1rem;
  border-radius: .9rem;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  box-shadow: inset 0 .08rem 0 rgba(255,255,255,.1);
}
.coin-store-flow h2 {
  font-size: 1.15rem;
}
.coin-store-flow ol {
  margin: .85rem 0 0;
  padding-left: 1.2rem;
  color: #dcefe1;
}
.coin-store-flow li + li {
  margin-top: .55rem;
}
.coin-pack-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: .75rem;
  align-content: start;
  padding: clamp(1rem, 2.4vw, 1.45rem);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,240,109,.2), transparent 10rem),
    linear-gradient(180deg, #17241c, #08100c);
  box-shadow: inset 0 .1rem 0 rgba(255,255,255,.1), 0 1rem 2.4rem rgba(0,0,0,.24);
}
.coin-pack-card::after {
  content: "";
  position: absolute;
  inset: auto -20% -38% -20%;
  height: 7rem;
  background: radial-gradient(ellipse, rgba(255,240,109,.16), transparent 68%);
  pointer-events: none;
}
.coin-pack-kicker {
  width: max-content;
  max-width: 100%;
  padding: .35rem .55rem;
  border-radius: 999px;
  background: rgba(255,240,109,.14);
  color: #fff8bc;
  font-size: .7rem;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.coin-pack-card h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.8rem);
}
.coin-pack-card strong {
  color: #fff8bc;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1;
}
.coin-pack-card strong small {
  display: block;
  margin-top: .2rem;
  color: #bfffd0;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.coin-pack-price {
  margin: 0;
  color: #bfffd0;
  font-weight: 1000;
}
.coin-pack-perks {
  display: grid;
  gap: .45rem;
  margin: .15rem 0;
  padding: 0;
  list-style: none;
}
.coin-pack-perks li {
  position: relative;
  padding-left: 1.25rem;
  color: #f5ffe9;
  font-weight: 800;
  font-size: .9rem;
}
.coin-pack-perks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .52em;
  width: .45rem;
  height: .45rem;
  border-radius: 999px;
  background: #d7ff5f;
  box-shadow: 0 0 .75rem rgba(215,255,95,.42);
}
.coin-pack-form {
  margin: 0;
}
.coin-pack-form .primary-action {
  width: 100%;
  border: 0;
  cursor: pointer;
  font: inherit;
}
.trust-note {
  margin-top: 1rem;
  color: #dcefe1;
}
.pack-unavailable {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8rem;
  padding: .75rem 1rem;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #dcefe1;
  font-weight: 900;
}
.coin-benefit-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
  margin-top: 1rem;
}
.coin-benefit-row article {
  padding: 1rem;
  border-radius: .85rem;
  background:
    radial-gradient(circle at 0 0, rgba(75,228,255,.13), transparent 9rem),
    rgba(255,255,255,.055);
  box-shadow: inset 0 .08rem 0 rgba(255,255,255,.08);
}
.coin-benefit-row h2 {
  font-size: 1.05rem;
}
.coin-benefit-row p {
  color: #dcefe1;
}
.coin-disclosure-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
  margin-top: 1rem;
}
.coin-disclosure-grid article {
  padding: 1rem;
  border-radius: .85rem;
  background: rgba(255,255,255,.055);
}
.coin-disclosure-grid span {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  margin-bottom: .7rem;
  border-radius: 999px;
  background: #d7ff5f;
  color: #07110d;
  font-weight: 1000;
}
.coin-disclosure-grid h2 {
  font-size: 1rem;
}
.coin-disclosure-grid p {
  color: #dcefe1;
}
@media (max-width: 1050px) {
  .site-header {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand cta"
      "nav nav";
  }
  .brand-lockup { grid-area: brand; }
  .site-nav {
    grid-area: nav;
    justify-self: stretch;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar {
    display: none;
  }
  .header-cta {
    grid-area: cta;
  }
}
@media (max-width: 820px) {
  .coin-store-hero,
  .coin-pack-grid,
  .coin-benefit-row {
    grid-template-columns: 1fr;
  }
  .coin-disclosure-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .site-header {
    padding: .55rem .6rem .65rem;
    gap: .55rem;
  }
  .brand-logo {
    width: 2.9rem;
    height: 2.9rem;
    border-radius: .7rem;
  }
  .brand-lockup strong {
    font-size: .82rem;
  }
  .brand-lockup em {
    display: none;
  }
  .site-nav {
    margin-inline: -.05rem;
    padding: .22rem;
    border-radius: .8rem;
  }
  .site-nav a {
    min-height: 2.35rem;
    padding: .6rem .78rem;
    font-size: .8rem;
  }
  .header-cta {
    min-height: 2.55rem;
    padding: .7rem .82rem;
    font-size: .72rem;
    box-shadow: inset 0 .1rem 0 rgba(255,255,255,.34), 0 .22rem 0 #4d160c;
  }
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* Mobile playability fix: keep grid and spin action together */
@media (max-width: 620px) {
  .game-shell {
    padding: .45rem;
  }
  .game-topbar {
    display: block;
    margin-bottom: .45rem;
  }
  .game-topbar > div {
    display: none;
  }
  .game-disclaimer {
    margin: 0;
    padding: .5rem .6rem;
    border-radius: .55rem;
    font-size: .68rem;
    line-height: 1.25;
  }
  .cluster-machine {
    grid-template-areas:
      "marquee"
      "grid"
      "controls"
      "side";
    gap: .45rem;
    padding: .38rem;
  }
  .slot-marquee {
    min-height: 2.45rem;
    flex-direction: row;
    align-items: center;
    padding: .42rem .62rem;
    border-radius: .65rem .65rem .32rem .32rem;
  }
  .slot-marquee span {
    font-size: clamp(1.05rem, 6vw, 1.45rem);
  }
  .slot-marquee i {
    display: none;
  }
  .cluster-canvas {
    width: min(100%, calc((100svh - 13.25rem) * 1.4));
    min-width: 0;
    justify-self: center;
    border-radius: .65rem;
    box-shadow:
      inset 0 0 0 .32rem #050907,
      inset 0 0 0 .46rem #b78a39,
      inset 0 0 1.8rem rgba(0,0,0,.82);
  }
  .controls-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .42rem;
    padding: .45rem;
    border-radius: .35rem .35rem .7rem .7rem;
  }
  .cluster-machine .spin-button {
    order: -2;
    grid-column: 1 / -1;
    min-height: 3.15rem;
    font-size: 1rem;
    box-shadow: inset 0 .14rem 0 rgba(255,255,255,.38), inset 0 -.2rem 0 rgba(89,19,6,.54), 0 .3rem 0 #320d08;
  }
  .cluster-machine .stake-controls {
    order: -1;
    grid-column: 1 / -1;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .28rem;
  }
  .cluster-machine .stake-controls button {
    min-height: 2.2rem;
    padding: .45rem .1rem;
    font-size: .72rem;
  }
  .cluster-machine .ghost-button {
    min-height: 2.3rem;
    padding: .45rem .3rem;
    border-radius: .38rem;
    font-size: .68rem;
  }
  .cluster-side {
    gap: .45rem;
  }
  .cluster-side .meter-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .35rem;
  }
  .cluster-side .meter-row div {
    padding: .45rem .35rem;
    border-radius: .42rem;
  }
  .cluster-side .meter-row span {
    font-size: .55rem;
  }
  .cluster-side .meter-row strong {
    font-size: .8rem;
  }
  .reactor-panel {
    display: none;
  }
  .cluster-status,
  .result-panel {
    padding: .55rem .6rem;
    border-radius: .5rem;
    font-size: .72rem;
    line-height: 1.25;
  }
}

@media (max-width: 380px) {
  .cluster-canvas {
    width: min(100%, calc((100svh - 12.4rem) * 1.4));
  }
  .cluster-machine .stake-controls button {
    font-size: .66rem;
  }
  .cluster-machine .ghost-button {
    font-size: .63rem;
  }
}

/* Human art-direction cleanup: fewer generic boxes, stronger game-cabinet feel */
:root {
  --cabinet: #10130d;
  --cabinet-2: #232018;
  --brass: #d49a35;
  --amber: #ffb13b;
  --acid: #d7ff5f;
  --cyan: #4be4ff;
  --ink: #050806;
}

body {
  background:
    linear-gradient(180deg, #08100c 0%, #0d120c 32%, #050806 100%);
}

.site-header {
  position: sticky;
  background: rgba(5, 8, 6, .92);
  box-shadow: 0 .7rem 1.6rem rgba(0, 0, 0, .24);
}

.site-header::after {
  background: linear-gradient(90deg, transparent, rgba(212, 154, 53, .55), rgba(75, 228, 255, .25), transparent);
}

.site-nav {
  background: transparent;
  box-shadow: none;
  gap: .15rem;
}

.site-nav a {
  border-radius: .25rem;
  color: #d8e8da;
  background: transparent;
}

.site-nav a:first-child,
.site-nav a:hover,
.site-nav a:focus-visible {
  color: #fff8bc;
  background: rgba(212, 154, 53, .14);
}

.header-cta,
.primary-action {
  border-radius: .3rem;
  background: linear-gradient(180deg, #fff1a3, var(--amber) 58%, #9b4719);
  color: #170806;
  box-shadow: inset 0 .1rem 0 rgba(255, 255, 255, .35), 0 .28rem 0 #4b170b;
}

.secondary-action,
.ghost-button {
  border-radius: .3rem;
  background: rgba(255, 255, 255, .06);
}

.hero {
  position: relative;
  min-height: min(82svh, 52rem);
  display: flex;
  align-items: flex-end;
  padding: clamp(7rem, 13vw, 12rem) clamp(1rem, 5vw, 5rem) clamp(2rem, 6vw, 5rem);
  isolation: isolate;
  background: #050806;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  min-height: 0;
  opacity: .86;
  background:
    linear-gradient(90deg, rgba(5, 8, 6, .94), rgba(5, 8, 6, .48) 44%, rgba(5, 8, 6, .18) 100%),
    linear-gradient(180deg, rgba(5, 8, 6, .2), rgba(5, 8, 6, .88)),
    url("assets/critter-hero.png") center / cover no-repeat;
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: .4rem;
  z-index: -1;
  background: linear-gradient(90deg, #4be4ff, #d7ff5f 36%, #ffb13b 70%, #b05cff);
}

.hero-copy {
  max-width: 45rem;
}

.hero-copy h1,
.coin-store-hero h1 {
  color: #fff8bc;
  text-shadow: 0 .09em 0 rgba(53, 18, 8, .74), 0 0 1.1rem rgba(255, 177, 59, .24);
}

.age-line,
.game-disclaimer,
.form-disclaimer {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f7eab4;
  font-size: .9rem;
  font-weight: 800;
}

.game-shell {
  background:
    linear-gradient(180deg, #151a12 0%, #070b08 100%);
  padding: clamp(1rem, 3vw, 2.5rem) clamp(.55rem, 3vw, 2.5rem) clamp(2rem, 4vw, 4rem);
}

.game-topbar {
  max-width: 1280px;
  margin: 0 auto 1rem;
  grid-template-columns: minmax(14rem, .55fr) minmax(0, 1fr);
  border-bottom: 1px solid rgba(212, 154, 53, .22);
  padding-bottom: .9rem;
}

.game-topbar h2 {
  color: #fff8bc;
}

.cluster-machine {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), transparent .4rem),
    linear-gradient(135deg, #35311f 0%, #15150e 15%, #070a07 100%);
  border-radius: 1.15rem;
  box-shadow:
    inset 0 .16rem 0 rgba(255, 255, 255, .16),
    inset 0 -.28rem 0 rgba(0, 0, 0, .7),
    0 1.6rem 4rem rgba(0, 0, 0, .48);
}

.slot-marquee {
  border-radius: .75rem .75rem .28rem .28rem;
  background:
    linear-gradient(90deg, #170d07 0%, #5a2311 25%, #142e25 61%, #141729 100%);
  box-shadow: inset 0 0 0 1px rgba(212, 154, 53, .42), inset 0 .12rem 0 rgba(255, 255, 255, .14);
}

.cluster-canvas {
  border-radius: .62rem;
  box-shadow:
    inset 0 0 0 .42rem #030504,
    inset 0 0 0 .58rem var(--brass),
    inset 0 0 2.4rem rgba(0, 0, 0, .86),
    0 .9rem 1.9rem rgba(0, 0, 0, .38);
}

.cluster-side .meter-row div,
.reactor-panel,
.cluster-status,
.result-panel,
.controls-panel,
.info-bands article,
.page-hero,
.ledger article,
.aurora-form,
.form-note,
.content-card,
.contact-card,
.profile-grid article,
.coin-store-flow,
.coin-pack-card,
.coin-benefit-row article,
.coin-disclosure-grid article,
.modal,
.age-popup-panel {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.cluster-side .meter-row div {
  background: transparent;
  border-bottom: 1px solid rgba(212, 154, 53, .25);
  padding: .72rem 0;
}

.cluster-side .meter-row span {
  color: #b8c6b8;
}

.cluster-side .meter-row strong {
  color: #fff8bc;
}

.reactor-panel {
  background: transparent;
  padding: .25rem 0 0;
  border-top: 1px solid rgba(212, 154, 53, .25);
}

.charge-meter i {
  height: .55rem;
  background: #060907;
  border-radius: 999px;
}

.cluster-status,
.result-panel {
  background: transparent;
  padding: .2rem 0;
  color: #d8e8da;
}

.controls-panel {
  background: linear-gradient(180deg, #1a1a13, #080a07);
  border-radius: .35rem .35rem .8rem .8rem;
  box-shadow: inset 0 .08rem 0 rgba(255, 255, 255, .08);
}

.cluster-machine .stake-controls button,
.cluster-machine .ghost-button {
  border-radius: .2rem;
  background: #151c16;
  box-shadow: inset 0 .08rem 0 rgba(255, 255, 255, .08), 0 .18rem 0 rgba(0, 0, 0, .5);
}

.cluster-machine .spin-button {
  border-radius: 999px;
  background: radial-gradient(circle at 35% 16%, #ffffff, #fff06d 22%, #ff9238 65%, #761f10);
  box-shadow: inset 0 .18rem 0 rgba(255, 255, 255, .4), inset 0 -.25rem 0 rgba(89, 19, 6, .58), 0 .46rem 0 #2d0d07, 0 0 1.2rem rgba(255, 146, 56, .22);
}

.info-bands {
  background: #070b08;
  padding-top: clamp(1.2rem, 4vw, 3rem);
}

.info-bands article {
  position: relative;
  background: transparent;
  padding: 0 0 0 1rem;
  border-left: 2px solid rgba(212, 154, 53, .5);
}

.info-bands span {
  color: var(--amber);
}

.page-hero,
.coin-store-hero {
  background: transparent;
  padding: clamp(1rem, 3vw, 2.2rem) 0;
  border-bottom: 1px solid rgba(212, 154, 53, .24);
}

.ledger article,
.aurora-form,
.form-note,
.content-card,
.contact-card,
.profile-grid article,
.coin-store-flow,
.coin-pack-card,
.coin-benefit-row article,
.coin-disclosure-grid article {
  background: transparent;
  border-top: 1px solid rgba(212, 154, 53, .22);
  padding-inline: 0;
}

.coin-pack-grid,
.coin-benefit-row,
.coin-disclosure-grid,
.ledger,
.profile-grid {
  gap: clamp(1.2rem, 3vw, 2rem);
}

.coin-pack-kicker,
.coin-disclosure-grid span {
  border-radius: .2rem;
}

.site-footer {
  background: #030504;
  border-top: .35rem solid #1b160d;
}

.footer-grid section {
  border-top: 1px solid rgba(212, 154, 53, .22);
  padding-top: 1rem;
}

.modal {
  background: #080d09;
  border-top: .35rem solid var(--brass);
}

.age-popup-panel {
  background: #080d09;
  border-top: .35rem solid var(--brass);
}

@media (max-width: 900px) {
  .hero {
    min-height: auto;
    padding-top: clamp(5rem, 18vw, 8rem);
  }

  .hero-media {
    opacity: .72;
    background-position: 58% center;
  }

  .game-topbar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .hero {
    padding: 5rem .85rem 1.5rem;
  }

  .hero-copy h1,
  h1 {
    font-size: clamp(2.1rem, 12vw, 3.2rem);
  }

  .age-line,
  .game-disclaimer {
    font-size: .72rem;
    line-height: 1.3;
  }

  .cluster-machine {
    border-radius: .65rem;
  }

  .cluster-canvas {
    border-radius: .42rem;
  }

  .cluster-side .meter-row div {
    padding: .42rem 0;
  }

  .info-bands article {
    padding-left: .8rem;
  }
}

/* Mobile header/menu UX pass */
@media (max-width: 720px) {
  .site-header {
    position: sticky;
    top: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand menu"
      "cta cta"
      "nav nav";
    gap: .48rem .65rem;
    padding: .5rem .62rem .58rem;
    background: rgba(5, 8, 6, .96);
  }

  .site-header::after {
    left: .62rem;
    right: .62rem;
  }

  .brand-lockup {
    grid-area: brand;
    min-width: 0;
    gap: .52rem;
    min-height: 3.35rem;
    overflow: visible;
  }

  .brand-logo {
    width: 2.55rem;
    height: 2.55rem;
    flex: 0 0 2.55rem;
    border-radius: .55rem;
    object-fit: cover;
  }

  .brand-logo-lockup {
    width: min(58vw, 13.6rem);
    max-height: 3.15rem;
    flex: 0 1 auto;
    object-fit: contain;
  }

  .brand-logo-combo {
    gap: .46rem;
  }

  .brand-logo-character {
    width: 2.9rem;
    height: 2.9rem;
    border-radius: .52rem;
  }

  .brand-logo-type strong {
    max-width: 8.7rem;
    overflow: hidden;
    font-size: .95rem;
    letter-spacing: .02em;
    text-overflow: ellipsis;
  }

  .brand-logo-type em {
    font-size: .62rem;
    letter-spacing: .2em;
  }

  .brand-lockup span {
    min-width: 0;
  }

  .brand-lockup strong {
    max-width: none;
    overflow: hidden;
    color: #fff8bc;
    font-size: .82rem;
    line-height: 1.05;
    letter-spacing: .025em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .brand-lockup em {
    display: block;
    overflow: hidden;
    max-width: 11.5rem;
    color: #a9bea9;
    font-size: .66rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-cta {
    grid-area: cta;
    min-height: 2.45rem;
    align-self: center;
    justify-self: stretch;
    padding: .62rem .72rem;
    border-radius: .28rem;
    font-size: .68rem;
    letter-spacing: .02em;
    white-space: nowrap;
    box-shadow: inset 0 .08rem 0 rgba(255, 255, 255, .34), 0 .18rem 0 #4d160c;
  }

  .menu-toggle {
    grid-area: menu;
    display: inline-grid;
    width: 2.8rem;
    height: 2.8rem;
    align-self: center;
    justify-self: end;
    place-items: center;
    gap: .18rem;
    border: 0;
    border-radius: .35rem;
    background: linear-gradient(180deg, #26352c, #0f1813);
    box-shadow: inset 0 .08rem 0 rgba(255, 255, 255, .12), 0 .22rem 0 rgba(0, 0, 0, .45);
    cursor: pointer;
  }

  .menu-toggle span {
    display: block;
    width: 1.25rem;
    height: .14rem;
    border-radius: 999px;
    background: #fff8bc;
    transition: transform .18s ease, opacity .18s ease;
  }

  .site-header.is-menu-open .menu-toggle span:nth-child(1) {
    transform: translateY(.32rem) rotate(45deg);
  }

  .site-header.is-menu-open .menu-toggle span:nth-child(2) {
    opacity: 0;
  }

  .site-header.is-menu-open .menu-toggle span:nth-child(3) {
    transform: translateY(-.32rem) rotate(-45deg);
  }

  .site-nav {
    grid-area: nav;
    display: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-self: stretch;
    grid-template-columns: 1fr;
    gap: .4rem;
    margin: .05rem 0 0;
    padding: .62rem;
    border-radius: .55rem;
    background: linear-gradient(180deg, #151a12, #070b08);
    box-shadow: inset 0 .08rem 0 rgba(255, 255, 255, .08), 0 .75rem 1.5rem rgba(0, 0, 0, .28);
    overflow-x: hidden;
    overflow-y: visible;
    -webkit-overflow-scrolling: auto;
    scrollbar-width: auto;
    scroll-snap-type: none;
  }

  .site-header.is-menu-open .site-nav {
    display: grid;
  }

  .site-nav a {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding: .76rem .82rem;
    border-radius: .28rem;
    background: rgba(255, 255, 255, .055);
    color: #eaf5e7;
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: .015em;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .site-nav a:first-child {
    background: rgba(215, 255, 95, .16);
    color: #fff8bc;
  }
}

@media (max-width: 380px) {
  .site-header {
    gap: .42rem .48rem;
  }

  .brand-logo {
    width: 2.35rem;
    height: 2.35rem;
    flex-basis: 2.35rem;
  }

  .brand-logo-lockup {
    width: min(54vw, 11.5rem);
    max-height: 2.9rem;
  }

  .brand-logo-character {
    width: 2.55rem;
    height: 2.55rem;
  }

  .brand-logo-type strong {
    max-width: 7rem;
    font-size: .78rem;
  }

  .brand-logo-type em {
    font-size: .54rem;
    letter-spacing: .16em;
  }

  .brand-lockup strong {
    font-size: .76rem;
  }

  .brand-lockup em {
    max-width: 8.8rem;
    font-size: .61rem;
  }

  .header-cta {
    padding-inline: .58rem;
    font-size: .63rem;
  }

  .site-nav a {
    padding-inline: .62rem;
    font-size: .7rem;
  }
}

/* Final logo lockup override */
.brand-lockup .brand-logo-combo {
  display: inline-flex;
  align-items: center;
}
.brand-lockup .brand-logo-character {
  display: block;
}
.brand-lockup .brand-logo-type strong {
  color: #fff8bc;
  font-size: clamp(1.02rem, 2vw, 1.48rem);
  font-weight: 1000;
  line-height: .92;
  letter-spacing: .035em;
  text-transform: uppercase;
  text-shadow: 0 .08em 0 rgba(91, 34, 15, .8), 0 0 .8rem rgba(255, 177, 59, .28);
  white-space: nowrap;
}
.brand-lockup .brand-logo-type em {
  display: block;
  color: #bfffd0;
  font-size: clamp(.68rem, 1.2vw, .92rem);
  font-style: normal;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: .28em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .brand-lockup .brand-logo-combo {
    gap: .46rem;
    width: 100%;
    overflow: visible;
  }
  .brand-lockup .brand-logo-character {
    width: 3.35rem;
    height: 3.35rem;
    object-fit: contain;
    background: #050806;
  }
  .brand-lockup .brand-logo-type strong {
    max-width: none;
    overflow: visible;
    font-size: 1.08rem;
    letter-spacing: .02em;
  }
  .brand-lockup .brand-logo-type em {
    font-size: .62rem;
    letter-spacing: .2em;
  }
}

@media (max-width: 380px) {
  .brand-lockup .brand-logo-character {
    width: 2.95rem;
    height: 2.95rem;
  }
  .brand-lockup .brand-logo-type strong {
    max-width: none;
    font-size: .92rem;
  }
  .brand-lockup .brand-logo-type em {
    font-size: .54rem;
    letter-spacing: .16em;
  }
}