/* Fortune Gems Guide — page/layout styles for the landing site.
   Product-specific (not part of the shipped token closure). Links the DS
   styles.css for tokens, then layers section layout on top. */

.site { background: var(--surface-canvas); }
.section { padding-block: var(--space-10); }
.section--tight { padding-block: var(--space-9); }
.section--muted { background: var(--surface-muted); }
.section__head { max-width: 720px; margin-bottom: var(--space-7); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__title { font-size: var(--text-2xl); margin-block: var(--space-2) var(--space-3); }
.section__lead { font-size: var(--text-md); color: var(--text-muted); line-height: var(--leading-normal); }
.prose p { font-size: var(--text-md); color: var(--text-body); line-height: var(--leading-relaxed); }
.prose p + p { margin-top: var(--space-4); }

/* ---------- Header ---------- */
.hdr { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--border-subtle); }
.hdr__bar { display: flex; align-items: center; gap: var(--space-5); height: var(--header-h); }
.hdr__logo { display: flex; align-items: center; }
.hdr__logo img { height: 46px; width: auto; display: block; }
.hdr__nav { display: flex; gap: var(--space-2); margin-left: auto; }
.hdr__nav a { font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-sm);
  color: var(--text-body); padding: 8px 12px; border-radius: var(--radius-pill); transition: color var(--dur-base), background var(--dur-base); }
.hdr__nav a:hover { color: var(--brand-strong); background: var(--emerald-50); text-decoration: none; }
.hdr__tools { display: flex; align-items: center; gap: var(--space-2); }
.hdr__icon { width: 40px; height: 40px; border-radius: var(--radius-pill); border: 1px solid var(--border-subtle);
  background: var(--white); display: grid; place-items: center; cursor: pointer; color: var(--text-body); }
.hdr__icon:hover { border-color: var(--brand); color: var(--brand-strong); }
.hdr__icon svg { width: 18px; height: 18px; }
.hdr__burger { display: none; }
@media (max-width: 1040px) {
  .hdr__nav { display: none; }
  .hdr__burger { display: grid; }
}

/* Header dropdown (Countries) + language menu */
.hdr__dd { position: relative; }
.hdr__ddbtn { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body);
  font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--text-body);
  background: none; border: 0; cursor: pointer; padding: 8px 12px; border-radius: var(--radius-pill);
  transition: color var(--dur-base), background var(--dur-base); }
.hdr__ddbtn:hover, .hdr__ddbtn[aria-expanded="true"] { color: var(--brand-strong); background: var(--emerald-50); }
.hdr__ddmenu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 230px; background: var(--white);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: 6px; display: none; flex-direction: column; gap: 2px; }
.hdr__ddmenu--right { left: auto; right: 0; }
.hdr__ddmenu[data-open="true"] { display: flex; }
.hdr__ddmenu a { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-body);
  padding: 9px 12px; border-radius: var(--radius-sm); }
.hdr__ddmenu a:hover { background: var(--surface-card-soft); color: var(--brand-strong); text-decoration: none; }
.hdr__ddmenu a.is-current { background: var(--emerald-50); color: var(--brand-strong); font-weight: var(--weight-bold); }
.hdr__ddmenu--static { position: static; display: flex; box-shadow: none; border: 0; padding: 0; min-width: 0; }
.hdr__flag { font-size: 1.05em; line-height: 1; margin-right: 8px; font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }
.hdr__ddbtn .hdr__flag { margin-right: 6px; }
.hdr__lang svg { width: 18px; height: 18px; }
.drawer__group { font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted);
  padding-top: var(--space-3); border: 0; }

/* ---------- Breadcrumb ---------- */
.crumbs { background: var(--surface-muted); border-bottom: 1px solid var(--border-subtle); }
.crumbs__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-block: var(--space-3);
  font-size: var(--text-sm); }
.crumbs__link { color: var(--text-muted); font-weight: var(--weight-medium); }
.crumbs__link:hover { color: var(--brand-strong); }
.crumbs__sep { color: var(--text-muted); opacity: 0.6; }
.crumbs__cur { color: var(--text-strong); font-weight: var(--weight-semibold); }

/* ---------- Interior page header ---------- */
.pagehead { position: relative; background: var(--grad-hero); color: var(--text-on-dark); overflow: hidden; }
.pagehead::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 88% -10%, rgba(224,138,46,0.22), transparent 70%); pointer-events: none; }
.pagehead__inner { position: relative; z-index: 1; padding-block: var(--space-9); max-width: var(--container-prose); }
.pagehead h1 { font-size: var(--text-4xl); color: #fff; letter-spacing: var(--tracking-tight); line-height: 1.06; }
.pagehead__lead { font-size: var(--text-md); color: var(--text-on-dark); line-height: var(--leading-relaxed);
  margin-top: var(--space-4); max-width: 56ch; }
@media (max-width: 700px) { .pagehead h1 { font-size: var(--text-3xl); } }

/* Generic content lists used on interior pages */
.clist { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.clist > div { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start;
  font-size: var(--text-base); color: var(--text-body); line-height: var(--leading-snug); }
.clist .pc__mark--pro { background: var(--emerald-500); }
.subgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }

/* ---------- HTML sitemap page ---------- */
.sm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); }
.sm-col__h { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--brand-strong);
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-3); }
.sm-col__desc { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-normal);
  margin-bottom: var(--space-4); }
.sm-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.sm-list a { font-size: var(--text-base); color: var(--text-body); font-weight: var(--weight-medium); }
.sm-list a:hover { color: var(--brand-strong); }

/* ---------- Real symbol tiles + payout table ---------- */
.symgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 820px) { .symgrid { grid-template-columns: repeat(2, 1fr); } }
.symtile { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--space-3); display: flex; flex-direction: column; align-items: center;
  gap: var(--space-2); transition: transform var(--dur-base), box-shadow var(--dur-base); }
.symtile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.symtile__imgwrap { width: 100%; aspect-ratio: 4 / 3; display: grid; place-items: center; padding: var(--space-3);
  background: radial-gradient(120% 120% at 50% 0%, #14342a 0%, #0a241c 60%, #04231c 100%);
  border: 1px solid rgba(224,169,46,0.22); border-radius: var(--radius-md); }
.symtile__img { max-width: 100%; max-height: 100%; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.4)); }
.symtile__name { font-family: var(--font-display); font-weight: var(--weight-bold); color: var(--text-strong); font-size: var(--text-base); }
.symtile__pay { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--brand-strong); }

.paywrap { margin-top: var(--space-7); overflow-x: auto; }
.paytable { width: 100%; border-collapse: collapse; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-card); min-width: 520px; }
.paytable th, .paytable td { text-align: left; padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle); font-size: var(--text-base); color: var(--text-body); vertical-align: middle; }
.paytable th { background: var(--surface-card-soft); font-family: var(--font-display); font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--brand-strong); }
.paytable tr:last-child td { border-bottom: 0; }
.paytable__sym { display: flex; align-items: center; gap: var(--space-3); font-weight: var(--weight-semibold); color: var(--text-strong); }
.paytable__thumb { width: 50px; height: 38px; object-fit: contain; padding: 3px; flex: none;
  background: radial-gradient(120% 120% at 50% 0%, #14342a, #04231c); border-radius: 8px; border: 1px solid rgba(224,169,46,0.22); }
.paytable__pay { font-weight: var(--weight-bold); color: var(--brand-strong); white-space: nowrap; }

/* Mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 60; background: var(--surface-overlay); display: none; }
.drawer[data-open="true"] { display: block; }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 86vw);
  background: var(--white); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2);
  box-shadow: var(--shadow-lg); }
.drawer__panel a { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg);
  color: var(--text-strong); padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.drawer__close { align-self: flex-end; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--grad-hero); color: var(--text-on-dark); overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 15% 110%, rgba(224,169,46,0.18), transparent 70%); pointer-events: none; }
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); align-items: center;
  padding-block: var(--space-10); position: relative; z-index: 1; }
.hero__h1 { font-size: var(--text-4xl); color: #fff; letter-spacing: var(--tracking-tight); line-height: 1.05; }
.hero__sub { font-size: var(--text-md); color: var(--text-on-dark); line-height: var(--leading-relaxed);
  margin-top: var(--space-5); max-width: 36ch; }
.hero__cta { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }
.hero__disclaimer { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--text-on-dark-muted); display:flex; gap:.5em; align-items:center;}
.hero__disclaimer svg{width:15px;height:15px;flex:none;}
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .hero__h1 { font-size: var(--text-3xl); }
}

/* Hero slot visual */
.reel { position: relative; background: rgba(255,255,255,0.04); border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-xl); padding: var(--space-5); box-shadow: var(--shadow-lg), var(--shadow-glow);
  backdrop-filter: blur(2px); }
.reel__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.reel__title { font-family: var(--font-display); font-weight: var(--weight-bold); color: #fff; font-size: var(--text-md); display:flex;align-items:center;gap:.5em;}
.reel__title img{width:24px;height:24px;}
.reel__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.reel__cell { aspect-ratio: 1; border-radius: var(--radius-md); display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.10); }
.reel__cell img { width: 56%; height: 56%; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4)); }
.reel__cell--win { border-color: var(--gold-400); box-shadow: 0 0 0 1px var(--gold-400), 0 0 24px rgba(224,169,46,0.5); }
.reel__foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-4);
  color: var(--text-on-dark-muted); font-size: var(--text-sm); }
.reel__chip { display: inline-flex; align-items:center; gap:.4em; background: rgba(224,169,46,0.16); color: var(--gold-200);
  padding: 4px 12px; border-radius: var(--radius-pill); font-weight: var(--weight-bold); font-size: var(--text-sm); }

/* Hero gameplay screenshot frame */
.hero-shot { position: relative; border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid rgba(224,169,46,0.45); box-shadow: var(--shadow-lg), var(--shadow-glow);
  background: rgba(0,0,0,0.2); line-height: 0; }
.hero-shot img { display: block; width: 100%; height: auto; }

/* ---------- Game Info two-col ---------- */
.gameinfo { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-7); align-items: start; }
@media (max-width: 820px) { .gameinfo { grid-template-columns: 1fr; } }
.showcase { background: var(--grad-hero); border-radius: var(--radius-xl); padding: var(--space-7);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4); color: var(--text-on-dark);
  box-shadow: var(--shadow-md); position: relative; overflow: hidden; }
.showcase__gem { width: 120px; height: 120px; filter: drop-shadow(0 12px 22px rgba(0,0,0,0.45)); }
.showcase__row { display: flex; gap: var(--space-3); }
.showcase__row img { width: 46px; height: 46px; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.4)); }
.showcase__cap { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); color: #fff; }
.showcase--shot { padding: var(--space-4); gap: var(--space-3); }
.showcase__shot { width: 100%; border-radius: var(--radius-lg); border: 1px solid rgba(224,169,46,0.4);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35); display: block; }

/* ---------- How to play steps ---------- */
.steps { display: grid; gap: var(--space-4); counter-reset: step; }
.step { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start;
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: var(--space-5); }
.step__num { counter-increment: step; width: 40px; height: 40px; border-radius: var(--radius-pill);
  background: var(--grad-gold); color: var(--text-on-gold); font-family: var(--font-display);
  font-weight: var(--weight-black); display: grid; place-items: center; box-shadow: var(--shadow-gold); }
.step__num::before { content: counter(step); }
.step__text { align-self: center; font-size: var(--text-md); color: var(--text-body); }
.step__text strong { color: var(--text-strong); }
@media (min-width: 720px) { .steps { grid-template-columns: 1fr 1fr; } }

/* ---------- Demo placeholder ---------- */
.demo-card { text-align: center; border: 2px dashed var(--emerald-200); background: var(--surface-card-soft);
  border-radius: var(--radius-xl); padding: var(--space-9) var(--space-6); display: flex; flex-direction: column;
  align-items: center; gap: var(--space-3); }
.demo-card__chest { width: 76px; height: 76px; filter: drop-shadow(0 10px 16px rgba(16,36,29,0.2)); }
.demo-card__title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-xl); color: var(--text-strong); }
.demo-card__hint { color: var(--text-muted); font-size: var(--text-base); max-width: 44ch; }

/* ---------- Live demo embed ---------- */
.demo-embed { position: relative; width: 100%; max-width: 880px; margin: 0 auto; aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border-subtle);
  background: var(--surface-dark); box-shadow: var(--shadow-glow); }
.demo-embed__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.demo-embed__cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--space-3); text-align: center; padding: var(--space-6);
  background: var(--grad-hero); color: #fff; }
.demo-embed__chest { width: 84px; height: 84px; filter: drop-shadow(0 12px 20px rgba(0,0,0,0.35)); }
.demo-embed__title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-2xl); color: #fff; }
.demo-embed__hint { color: rgba(255,255,255,0.78); font-size: var(--text-base); max-width: 46ch; }
@media (max-width: 640px) { .demo-embed { aspect-ratio: 3 / 4; } }

/* ---------- Generic grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 820px) { .grid-3 { grid-template-columns: repeat(2,1fr); } .grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .grid-3 { grid-template-columns: 1fr; } }

/* ---------- Pros & Cons ---------- */
.pc { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 760px) { .pc { grid-template-columns: 1fr; } }
.pc__col { border-radius: var(--radius-lg); padding: var(--space-6); border: 1px solid; }
.pc__col--pro { background: var(--positive-soft); border-color: var(--emerald-200); }
.pc__col--con { background: var(--negative-soft); border-color: var(--ruby-300); }
.pc__h { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display);
  font-weight: var(--weight-bold); font-size: var(--text-lg); margin-bottom: var(--space-4); }
.pc__h--pro { color: var(--emerald-700); }
.pc__h--con { color: var(--ruby-700); }
.pc__list { display: flex; flex-direction: column; gap: var(--space-3); }
.pc__item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start;
  font-size: var(--text-base); color: var(--text-body); line-height: var(--leading-snug); }
.pc__mark { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-size: 13px; font-weight: 800; color: #fff; }
.pc__mark--pro { background: var(--emerald-500); }
.pc__mark--con { background: var(--ruby-500); }

/* ---------- Footer ---------- */
.ftr { background: var(--surface-dark); color: var(--text-on-dark); padding-block: var(--space-9) var(--space-7); }
.ftr__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-7); }
@media (max-width: 760px) { .ftr__grid { grid-template-columns: 1fr; gap: var(--space-6); } }
.ftr__logo img { height: 52px; margin-bottom: var(--space-4); }
.ftr__about { color: var(--text-on-dark-muted); font-size: var(--text-sm); line-height: var(--leading-relaxed); max-width: 38ch; }
.ftr__h { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: #fff; margin-bottom: var(--space-4); }
.ftr__links { display: flex; flex-direction: column; gap: var(--space-2); }
.ftr__links a { color: var(--text-on-dark-muted); font-size: var(--text-base); }
.ftr__links a:hover { color: var(--brand-on-dark); text-decoration: none; }
.ftr__bottom { border-top: 1px solid var(--border-on-dark); margin-top: var(--space-7); padding-top: var(--space-5);
  display: flex; gap: var(--space-4); justify-content: space-between; flex-wrap: wrap; }
.ftr__disclaimer { color: var(--text-on-dark-muted); font-size: var(--text-xs); max-width: 80ch; line-height: var(--leading-normal); }
.ftr__copy { color: var(--text-on-dark-muted); font-size: var(--text-xs); }

/* ---------- Country guide cards ---------- */
.cguides { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 920px) { .cguides { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cguides { grid-template-columns: 1fr; } }
.cguide { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5);
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); transition: transform var(--dur-base), box-shadow var(--dur-base); }
.cguide:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); text-decoration: none; }
.cguide__flag { font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--brand-strong); }
.cguide__title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg);
  color: var(--text-strong); }
.cguide__desc { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-normal); }
.cguide__more { margin-top: auto; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--brand); }

/* ---------- Related guides ---------- */
.related { background: var(--surface-card-soft); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-6); }
.related__h { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-md);
  color: var(--text-strong); margin-bottom: var(--space-4); }
.related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.related__item { display: flex; flex-direction: column; gap: 2px; padding: var(--space-4);
  background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  transition: border-color var(--dur-base), transform var(--dur-base); }
.related__item:hover { border-color: var(--brand); transform: translateY(-2px); text-decoration: none; }
.related__item b { font-family: var(--font-display); font-size: var(--text-base); color: var(--text-strong); }
.related__item span { font-size: var(--text-sm); color: var(--text-muted); }

/* ---------- Improved demo embed ---------- */
.demo-embed { position: relative; width: 100%; max-width: 920px; margin: 0 auto; aspect-ratio: 16 / 10;
  border-radius: var(--radius-xl); overflow: hidden; border: 1px solid rgba(224,169,46,0.4);
  background: var(--surface-dark); box-shadow: var(--shadow-glow); }
.demo-embed__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.demo-embed__cover, .demo-embed__state { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--space-3); text-align: center; padding: var(--space-6);
  background: var(--grad-hero); color: #fff; }
.demo-embed__chest { width: 84px; height: 84px; filter: drop-shadow(0 12px 20px rgba(0,0,0,0.35)); }
.demo-embed__title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-2xl); color: #fff; }
.demo-embed__hint { color: rgba(255,255,255,0.82); font-size: var(--text-base); max-width: 48ch; }
/* Loading state: skeleton + spinner over the iframe until it loads */
.demo-embed__state { background: linear-gradient(180deg, #2a1409, #3d2010); }
.demo-embed__spinner { width: 46px; height: 46px; border-radius: 50%; border: 4px solid rgba(244,198,106,0.25);
  border-top-color: var(--gold-300); animation: fg-spin 0.9s linear infinite; }
@keyframes fg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .demo-embed__spinner { animation-duration: 2.4s; } }
.demo-embed__tab { margin-top: var(--space-2); }
.demo-embed__open { display: inline-flex; align-items: center; gap: 8px; }
.demo-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--space-5); }
.demo-note { text-align: center; margin-top: var(--space-4); color: var(--text-muted); font-size: var(--text-sm);
  max-width: 70ch; margin-inline: auto; }
@media (max-width: 640px) { .demo-embed { aspect-ratio: 3 / 4; } }


/* ---------- Conversion helpers ---------- */
.hero-metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-3); margin-top: var(--space-5); max-width: 620px; }
.hero-metric { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-md); padding: 12px 14px; backdrop-filter: blur(8px); }
.hero-metric span { display:block; font-size: var(--text-xs); color: rgba(255,255,255,0.72); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.hero-metric b { display:block; margin-top: 3px; color:#fff; font-family: var(--font-display); font-size: var(--text-sm); }
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.trust-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); }
.trust-card b { display:block; color: var(--text-strong); font-family: var(--font-display); font-size: var(--text-md); margin-bottom: var(--space-2); }
.trust-card p { color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-normal); margin:0; }
.mobile-cta { display:none; }
@media (max-width: 760px) {
  .hero-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mobile-cta { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 80; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; background: rgba(42,20,9,0.92); border: 1px solid rgba(244,198,106,0.35); border-radius: 18px; box-shadow: 0 18px 44px rgba(0,0,0,0.35); backdrop-filter: blur(10px); }
  .mobile-cta a { display:flex; align-items:center; justify-content:center; min-height: 44px; border-radius: 999px; font-weight: 800; font-size: 14px; text-decoration:none; }
  .mobile-cta__primary { background: var(--grad-gold); color: #2a1409; }
  .mobile-cta__secondary { background: rgba(255,255,255,0.10); color: #fff; border: 1px solid rgba(255,255,255,0.22); }
  body.site { padding-bottom: 82px; }
}


/* ===== Visual refresh (sunset temple / premium card look) ===== */
html { background: #071516; }
body.site {
  background:
    radial-gradient(1000px 500px at 50% 0%, rgba(255,176,110,0.16), transparent 60%),
    linear-gradient(180deg, rgba(3,11,12,0.84) 0%, rgba(5,16,17,0.88) 30%, rgba(4,12,13,0.96) 100%),
    url('assets/temple-sunset-bg.jpg') center top / cover fixed no-repeat;
  color: var(--text-body);
}
.site {
  background: linear-gradient(180deg, rgba(7,21,22,0.24) 0%, rgba(7,21,22,0.62) 40%, rgba(7,21,22,0.86) 100%);
}
.hdr {
  background: rgba(6, 18, 20, 0.76);
  border-bottom: 1px solid rgba(255, 218, 161, 0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}
.hdr__logo img { filter: drop-shadow(0 6px 14px rgba(0,0,0,0.22)); }
.hdr__nav a, .hdr__ddbtn, .hdr__icon { color: rgba(255,245,227,0.92); }
.hdr__icon { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
.hdr__nav a:hover, .hdr__ddbtn:hover, .hdr__ddbtn[aria-expanded="true"] { background: rgba(255,255,255,0.08); color: #fff; }
.hdr__ddmenu { background: rgba(248,239,226,0.98); border-color: rgba(129,91,36,0.18); }
.crumbs {
  background: rgba(7, 20, 22, 0.56);
  border-bottom: 1px solid rgba(255, 218, 161, 0.1);
  backdrop-filter: blur(10px);
}
.crumbs__link { color: rgba(255,240,220,0.72); }
.crumbs__cur { color: #fff; }

.hero, .pagehead {
  background:
    linear-gradient(180deg, rgba(9,24,28,0.30) 0%, rgba(7,18,20,0.70) 50%, rgba(6,14,16,0.92) 100%),
    radial-gradient(70% 58% at 50% 8%, rgba(255,210,140,0.36), transparent 55%),
    url('assets/temple-sunset-bg.jpg') center center / cover no-repeat;
}
.hero::before, .pagehead::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5,12,14,0.72) 0%, rgba(5,12,14,0.36) 38%, rgba(5,12,14,0.24) 100%);
  pointer-events: none;
}
.hero::after {
  background: radial-gradient(60% 50% at 12% 112%, rgba(255, 190, 112, 0.18), transparent 72%) !important;
}
.hero__grid {
  min-height: clamp(560px, 72vh, 760px);
  align-items: center;
}
.hero__h1 { text-shadow: 0 8px 24px rgba(0,0,0,0.34); }
.hero__sub { color: rgba(255,244,229,0.92); }
.hero__disclaimer { color: rgba(255,232,204,0.74); }
.hero__cta .fgds-btn--ondark { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.16); }
.hero-shot {
  background: linear-gradient(180deg, rgba(11,25,26,0.88), rgba(11,18,19,0.70));
  border-color: rgba(255, 211, 150, 0.32);
  padding: 14px;
  backdrop-filter: blur(10px);
}
.hero-shot::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 14px;
  width: min(55%, 280px);
  height: 120px;
  background: url('assets/fortune-gems-title.webp') left center / contain no-repeat;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.28));
}
.hero-shot img {
  border-radius: calc(var(--radius-xl) - 6px);
  opacity: 0.98;
  box-shadow: 0 16px 34px rgba(0,0,0,0.26);
}
.hero-metric {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 14px 30px rgba(0,0,0,0.14);
}
.hero-metric b { color: #fff3de; }
.hero-metric span { color: rgba(255,245,229,0.70); }

main > .section {
  background: transparent;
  padding-block: var(--space-6);
}
main > .section > .fg-container {
  background: linear-gradient(180deg, rgba(251,245,236,0.95) 0%, rgba(247,238,225,0.93) 100%);
  border: 1px solid rgba(121, 82, 32, 0.12);
  border-radius: 30px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.14);
  padding: clamp(22px, 3vw, 38px);
  backdrop-filter: blur(10px);
}
main > .section.section--muted > .fg-container {
  background: linear-gradient(180deg, rgba(247,238,225,0.96) 0%, rgba(243,232,216,0.94) 100%);
}
.section__head { margin-bottom: var(--space-6); }
.section__lead { color: #5c4d39; }
.prose p { color: #4b3e2c; }

.showcase, .demo-embed__cover, .demo-embed__state {
  background:
    linear-gradient(180deg, rgba(7,19,20,0.72) 0%, rgba(8,17,19,0.88) 100%),
    url('assets/temple-sunset-bg.jpg') center center / cover no-repeat;
}
.showcase { border: 1px solid rgba(255, 211, 150, 0.22); box-shadow: 0 18px 38px rgba(0,0,0,0.18); }
.showcase__cap, .pagehead h1, .demo-embed__title { text-shadow: 0 8px 24px rgba(0,0,0,0.34); }

.fgds-card, .cguide, .step, .related__item, .symtile, .fgds-acc__item, .paytable {
  background: linear-gradient(180deg, rgba(255,250,244,0.96) 0%, rgba(250,242,230,0.94) 100%);
  border-color: rgba(132, 92, 37, 0.14);
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
}
.fgds-card--soft, .related, .pc__col--pro, .pc__col--con {
  background: linear-gradient(180deg, rgba(248,239,225,0.96) 0%, rgba(243,232,216,0.94) 100%);
}
.fgds-feat__icon, .symtile__imgwrap, .paytable__thumb {
  background: linear-gradient(180deg, #102224 0%, #0c1718 100%);
  border-color: rgba(255, 211, 150, 0.22);
}
.fgds-table, .paytable {
  overflow: hidden;
  border-color: rgba(132, 92, 37, 0.14);
}
.fgds-table thead th, .paytable th {
  background: linear-gradient(180deg, #102325 0%, #0a1718 100%);
  color: #fff4df;
}
.fgds-table tbody tr:nth-child(even) { background: rgba(116, 87, 42, 0.05); }

.fgds-btn--primary {
  box-shadow: 0 12px 28px rgba(224,169,46,.30), inset 0 1px 0 rgba(255,255,255,0.24);
}
.fgds-btn--outline {
  background: rgba(255,255,255,0.56);
  border-color: rgba(132, 92, 37, 0.18);
}
.fgds-btn--outline:hover { background: rgba(255,255,255,0.82); }

.related {
  border-color: rgba(132, 92, 37, 0.14);
  box-shadow: 0 14px 34px rgba(0,0,0,0.08);
}
.related__item:hover, .cguide:hover, .symtile:hover, .fgds-card--hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(0,0,0,0.12);
}

.ftr {
  background: linear-gradient(180deg, rgba(7,18,20,0.88) 0%, rgba(5,13,15,0.98) 100%);
  border-top: 1px solid rgba(255, 220, 168, 0.10);
}
.ftr__about, .ftr__links a, .ftr__copy, .ftr__disclaimer { color: rgba(255,240,220,0.72); }
.ftr__links a:hover { color: #fff4df; }

@media (max-width: 860px) {
  .hero__grid { min-height: 0; }
  .hero-shot::before { width: 58%; height: 92px; left: 14px; top: 12px; }
  main > .section > .fg-container { border-radius: 24px; }
}
@media (max-width: 560px) {
  .hdr { background: rgba(6, 18, 20, 0.88); }
  .hero-shot { padding: 10px; }
  .hero-shot::before { width: 64%; height: 74px; }
  main > .section > .fg-container { padding: 18px; border-radius: 20px; }
}


/* Fix hero image overlay: keep only one screenshot in hero */
.hero-shot::before {
  content: none !important;
  display: none !important;
  background: none !important;
}