/* ── Tiến Lên Royale — tienlenroyale.com ──────────────────────────────────
   One stylesheet for the whole site. The document classes (.wrap, .nav,
   .meta, .rule, .footer, h1/h2/p/ul) are the ones the legal pages have
   always used and still mean the same thing; everything below the
   "MARKETING" band is new and only the landing/rules pages touch it.
   Fonts are chosen for FULL VIETNAMESE COVERAGE — Playfair Display and
   Be Vietnam Pro both ship the vietnamese subset, so ế ộ ạ ề never fall
   back to a mismatched face mid-word.
   ───────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  --ink:        #0a0704;
  --ink-2:      #120d07;
  --panel:      #17110a;
  --panel-2:    #1e1610;
  --gold:       #f6d074;
  --gold-deep:  #d6a83e;
  --gold-glow:  rgba(246, 208, 116, .16);
  --cream:      #ece2cd;
  --cream-hi:   #f7f0e0;
  --muted:      #9a8d70;
  --line:       #3a2d16;
  --line-soft:  rgba(214, 168, 62, .18);
  --oxblood:    #6d1f22;

  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --body: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, sans-serif;

  --shell: 1120px;
  --doc: 760px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: radial-gradient(ellipse at 50% 0%, #241a0c 0%, #120d07 48%, #0a0704 100%);
  background-attachment: fixed;
  color: var(--cream);
  font: 16.5px/1.7 var(--body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── Document typography (legal pages + rules body) ──────────────────── */

.wrap { max-width: var(--doc); margin: 0 auto; padding: 48px 24px 80px; }

h1 {
  font-family: var(--display);
  color: var(--gold);
  font-size: clamp(1.9rem, 5vw, 2.3rem);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: .5rem;
  letter-spacing: .3px;
}
h2 {
  font-family: var(--display);
  color: var(--gold-deep);
  font-size: clamp(1.2rem, 3.4vw, 1.4rem);
  font-weight: 600;
  margin: 2.2rem 0 .7rem;
  letter-spacing: .2px;
}
h3 {
  font-family: var(--display);
  color: var(--cream-hi);
  font-size: 1.08rem;
  font-weight: 600;
  margin: 1.4rem 0 .4rem;
}

p, li { margin-bottom: .85rem; }
ul, ol { padding-left: 1.4rem; }
a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: var(--cream-hi); }
strong { color: var(--cream-hi); font-weight: 600; }
em { color: var(--cream-hi); }

.meta { color: var(--muted); font-style: italic; margin-bottom: 2rem; }
.rule { border: none; border-top: 1px solid var(--line); margin: 2.5rem 0; }
.nav { margin-bottom: 2.5rem; font-size: .95rem; }
.nav a { margin-right: 1.2rem; text-decoration: none; }
.brand { display: flex; align-items: center; gap: 14px; margin-bottom: 2rem; }
.brand .crest { font-size: 2rem; }
.footer { margin-top: 3rem; color: var(--muted); font-size: .9rem; }

/* ══ MARKETING ═══════════════════════════════════════════════════════ */

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 24px; }

/* ── Site header ─────────────────────────────────────────────────────── */

.site-head {
  position: sticky; top: 0; z-index: 40;
  background: rgba(10, 7, 4, .82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
  transition: background .25s ease, border-color .25s ease;
}
/* On the landing page the wordmark lives in the hero, so the bar starts
   invisible and only materialises once you scroll off the hero (the .scrolled
   class is set by the inline script at the foot of the page). */
/* fixed, not sticky: sticky reserves flow space at the top of the page and the
   hero art has to bleed all the way up behind the bar. */
.site-head.over-hero {
  position: fixed; left: 0; right: 0;
  background: transparent; border-bottom-color: transparent;
}
.site-head.over-hero .site-mark { opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.site-head.over-hero.scrolled { background: rgba(10, 7, 4, .88); border-bottom-color: var(--line-soft); }
.site-head.over-hero.scrolled .site-mark { opacity: 1; pointer-events: auto; }
.site-head .shell {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 58px;
}
.site-mark {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 600; font-size: 1.02rem;
  color: var(--gold); text-decoration: none; white-space: nowrap;
}
.site-mark .pip { color: var(--gold-deep); font-size: .85em; }
.site-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.site-nav a {
  color: var(--cream); text-decoration: none; font-size: .87rem;
  padding: 7px 10px; border-radius: 7px; white-space: nowrap;
}
.site-nav a:hover { color: var(--gold); background: rgba(246, 208, 116, .08); }
.site-nav a.lang {
  border: 1px solid var(--line); color: var(--gold-deep);
  margin-left: 6px; font-size: .82rem;
}
@media (max-width: 620px) {
  .site-nav a { padding: 6px 8px; font-size: .82rem; }
  .site-nav a.hide-sm { display: none; }
  .site-mark { font-size: .93rem; }
}

/* ── Hero ─────────────────────────────────────────────────────────────
   Split hero (owner's design, 2026-08-02): copy column left, the table art
   bleeding off the right edge, a feature strip beneath both. Below 980px it
   collapses to the art-as-backdrop shape, which is the only thing that reads
   on a phone.
   ───────────────────────────────────────────────────────────────────── */

.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse at 20% 10%, #221809 0%, #120d07 46%, #0a0704 100%);
}
.hero .shell { padding-top: 92px; padding-bottom: 34px; }

/* The art. Desktop: an absolutely-placed right half, faded into the page on
   its left so the seated player at the crop edge reads as depth, not a cut. */
.hero-art {
  position: absolute; z-index: -1;
  top: 0; right: 0; bottom: 196px;
  /* Capped, because the source is 842px wide — past ~1010 it visibly softens. */
  width: min(62%, 1010px);
  background: no-repeat right top / cover;
  background-image: url("assets/hero-table.webp");
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 100%);
}
.hero-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,7,4,.45) 0%, rgba(10,7,4,0) 22%, rgba(10,7,4,0) 62%, rgba(10,7,4,.85) 100%);
}

.hero-grid { display: grid; grid-template-columns: minmax(0, 44%) 1fr; }
.hero-copy { max-width: 30rem; padding-bottom: 18px; }

.hero-logo {
  width: min(290px, 72vw); height: auto; display: block; margin: 0 0 12px -8px;
  filter: drop-shadow(0 14px 34px rgba(0, 0, 0, .8));
}

.hero-eyebrow {
  display: flex; align-items: center; gap: 9px;
  font-size: .72rem; font-weight: 600; letter-spacing: 2.6px;
  text-transform: uppercase; color: var(--gold-deep);
  margin-bottom: 12px;
}
.hero-eyebrow i { font-style: normal; font-size: .8rem; opacity: .8; }

.hero-h1 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.12;
  color: var(--cream-hi); margin-bottom: 0;
  text-shadow: 0 3px 22px rgba(0, 0, 0, .85);
}
.hero-h1 em { color: var(--gold); font-style: normal; display: block; }

.hero-orn {
  display: flex; align-items: center; gap: 12px;
  color: var(--gold-deep); font-size: .7rem; margin: 18px 0;
  max-width: 280px;
}
.hero-orn::before, .hero-orn::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(to right, transparent, var(--line-soft), transparent);
}

.hero-sub {
  color: var(--cream); opacity: .86; font-size: .97rem; max-width: 34ch;
  margin-bottom: 22px; text-shadow: 0 2px 14px rgba(0, 0, 0, .8);
}

/* ── Store buttons ───────────────────────────────────────────────────── */

.store-row { display: flex; flex-wrap: wrap; gap: 12px; }
.store-btn {
  display: inline-flex; align-items: center; gap: 13px;
  padding: 12px 20px 12px 15px; border-radius: 13px; text-decoration: none;
  border: 1px solid; background-clip: padding-box;
  transition: transform .14s ease, box-shadow .16s ease, border-color .16s ease;
}
.store-btn:active { transform: translateY(1px) scale(.995); }
.store-btn svg { flex: none; width: 34px; height: 34px; }
.store-txt { display: flex; flex-direction: column; line-height: 1.15; }
.store-txt small {
  font-size: .62rem; letter-spacing: 1.7px; text-transform: uppercase;
  opacity: .72; margin-bottom: 3px;
}
.store-txt strong { font-size: 1.05rem; font-weight: 700; letter-spacing: .2px; }
.store-txt em { font-style: normal; font-size: .68rem; opacity: .62; margin-top: 3px; }

.store-ios {
  color: #eaf1ff; border-color: rgba(90, 130, 235, .55);
  background: linear-gradient(150deg, rgba(20, 30, 66, .95), rgba(11, 15, 34, .95));
  box-shadow: 0 8px 26px rgba(40, 78, 200, .22);
}
.store-ios:hover { color: #fff; border-color: rgba(120, 160, 255, .9); box-shadow: 0 10px 32px rgba(40, 78, 200, .38); }
.store-play {
  color: #e9fff1; border-color: rgba(58, 176, 108, .55);
  background: linear-gradient(150deg, rgba(14, 48, 30, .95), rgba(8, 22, 15, .95));
  box-shadow: 0 8px 26px rgba(30, 150, 90, .2);
}
.store-play:hover { color: #fff; border-color: rgba(90, 220, 140, .9); box-shadow: 0 10px 32px rgba(30, 150, 90, .36); }

.store-note {
  margin: 16px 0 0; font-size: .82rem; color: var(--muted); max-width: 40ch;
}
.learn-link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 20px;
  font-size: .78rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold); text-decoration: none;
  border-bottom: 1px solid var(--line-soft); padding-bottom: 4px;
}
.learn-link:hover { color: var(--cream-hi); border-bottom-color: var(--gold-deep); }

/* ── Feature strip inside the hero ───────────────────────────────────── */

.feature-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(180deg, rgba(24, 17, 10, .88), rgba(13, 9, 5, .92));
  backdrop-filter: blur(6px);
  margin-bottom: 26px;
}
.feat {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 22px 20px;
  border-left: 1px solid var(--line-soft);
}
.feat:first-child { border-left: none; }
.feat-icon {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(214, 168, 62, .45);
  background: radial-gradient(circle at 50% 35%, rgba(246, 208, 116, .16), rgba(20, 14, 8, .6));
  color: var(--gold);
}
.feat-icon svg { width: 22px; height: 22px; }
.feat h3 {
  margin: 2px 0 6px; font-family: var(--body); font-size: .76rem; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold);
}
.feat p { margin: 0; font-size: .84rem; color: var(--cream); opacity: .76; line-height: 1.55; }

.scroll-cue {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding-bottom: 26px; color: var(--gold-deep); text-decoration: none;
  font-size: .64rem; letter-spacing: 2.6px; text-transform: uppercase;
}
.scroll-cue svg { width: 26px; height: 13px; animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue svg { animation: none; } }

/* ── Hero, narrower screens ──────────────────────────────────────────── */

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: minmax(0, 50%) 1fr; }
  .feature-strip { grid-template-columns: repeat(2, 1fr); }
  .feat:nth-child(3) { border-left: none; }
  .feat:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
}
@media (max-width: 900px) {
  /* Stacked: the art becomes a band across the top that the copy rises into,
     rather than a full-height backdrop — a 842×790 image cropped to a phone's
     aspect shows one shoulder and half a nameplate, which reads as a mistake. */
  .hero { text-align: center; }
  .hero .shell { padding-top: calc(44vh - 30px); padding-bottom: 26px; }
  .hero-art {
    inset: 0 0 auto 0; width: 100%; height: 46vh; min-height: 260px;
    background-image: url("assets/hero-table-sm.webp");
    background-position: center 34%;
    -webkit-mask-image: none; mask-image: none;
  }
  .hero-art::after {
    background: linear-gradient(to bottom, rgba(10,7,4,.62) 0%, rgba(10,7,4,.12) 34%,
                rgba(10,7,4,.72) 76%, #0a0704 100%);
  }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: none; margin: 0 auto; padding-bottom: 8px; }
  .hero-logo { margin: 0 auto 14px; }
  .hero-eyebrow, .hero-orn { justify-content: center; }
  .hero-orn { margin-left: auto; margin-right: auto; }
  .hero-sub { max-width: 40ch; margin-left: auto; margin-right: auto; }
  .store-row { justify-content: center; }
  .store-note { margin-left: auto; margin-right: auto; }
  .feat { text-align: left; }
}
@media (max-width: 620px) {
  .feature-strip { grid-template-columns: 1fr; }
  .feat { border-left: none; border-top: 1px solid var(--line-soft); padding: 18px; }
  .feat:first-child { border-top: none; }
  .store-btn { flex: 1 1 100%; justify-content: center; }
}

.cta-row {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  margin-top: 28px;
}
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 24px; border-radius: 11px; text-decoration: none;
  font-family: var(--body); font-size: .95rem; font-weight: 600;
  letter-spacing: .2px; border: 1px solid transparent;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-gold {
  background: linear-gradient(180deg, #f6d074 0%, #d09b30 100%);
  color: #241a0c; box-shadow: 0 8px 26px rgba(214, 168, 62, .3);
}
.btn-gold:hover { color: #1a1208; box-shadow: 0 10px 32px rgba(214, 168, 62, .45); }
.btn-ghost {
  background: rgba(20, 15, 9, .72); color: var(--cream-hi);
  border-color: var(--line); backdrop-filter: blur(4px);
}
.btn-ghost:hover { border-color: var(--gold-deep); color: var(--gold); }
.btn .sub { display: block; font-size: .72rem; font-weight: 400; opacity: .75; letter-spacing: .3px; }
.btn .stack { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }

/* ── Sections ────────────────────────────────────────────────────────── */

.band { padding: 66px 0; }
.band-alt { background: linear-gradient(180deg, rgba(30, 22, 16, 0) 0%, rgba(30, 22, 16, .5) 12%, rgba(30, 22, 16, .5) 88%, rgba(30, 22, 16, 0) 100%); }

.sec-head { text-align: center; max-width: 42ch; margin: 0 auto 40px; }
.eyebrow {
  font-family: var(--body); font-size: .74rem; font-weight: 600;
  letter-spacing: 2.6px; text-transform: uppercase; color: var(--gold-deep);
  display: block; margin-bottom: 10px;
}
.sec-head h2 { margin-top: 0; color: var(--gold); font-size: clamp(1.5rem, 4.2vw, 2rem); }
.sec-head p { color: var(--muted); margin-top: 8px; margin-bottom: 0; }

.ornament {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  color: var(--gold-deep); font-size: .8rem; margin: 0 auto;
}
.ornament::before, .ornament::after {
  content: ""; height: 1px; width: min(90px, 16vw);
  background: linear-gradient(to right, transparent, var(--line-soft), transparent);
}

/* ── Cards ───────────────────────────────────────────────────────────── */

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); }

.card {
  background: linear-gradient(180deg, rgba(30, 22, 16, .82), rgba(18, 13, 7, .82));
  border: 1px solid var(--line); border-radius: 14px;
  padding: 24px 22px;
}
.card .suit { font-size: 1.5rem; color: var(--gold-deep); line-height: 1; display: block; margin-bottom: 12px; }
.card h3 {
  margin: 0 0 8px; font-family: var(--body); font-size: .82rem; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold);
}
.card p { color: var(--cream); opacity: .82; font-size: .95rem; margin-bottom: 0; }

.rule-card { position: relative; }
.rule-card .vn {
  font-family: var(--display); font-size: 1.35rem; color: var(--gold);
  display: block; line-height: 1.15;
}
.rule-card .en {
  font-size: .74rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted); display: block; margin: 4px 0 12px;
}

/* ── Gallery ─────────────────────────────────────────────────────────── */

.shots {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
}
.shot {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: #0a0704;
}
.shot img { width: 100%; height: auto; display: block; }
.shot figcaption {
  padding: 11px 14px; font-size: .84rem; color: var(--muted);
  border-top: 1px solid var(--line-soft); background: rgba(18, 13, 7, .8);
}
@media (max-width: 700px) {
  .shots {
    grid-auto-flow: column; grid-auto-columns: 86%;
    grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 10px; margin: 0 -24px; padding-left: 24px; padding-right: 24px;
    scrollbar-width: thin;
  }
  .shot { scroll-snap-align: center; }
}

/* ── Q&A ─────────────────────────────────────────────────────────────── */

.qa { max-width: var(--doc); margin: 0 auto; }
.qa details {
  border-bottom: 1px solid var(--line); padding: 4px 0;
}
.qa summary {
  cursor: pointer; list-style: none; padding: 15px 30px 15px 0;
  font-weight: 600; color: var(--cream-hi); position: relative; font-size: .98rem;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  color: var(--gold-deep); font-size: 1.3rem; line-height: 1;
}
.qa details[open] summary::after { content: "−"; }
.qa details p { color: var(--muted); padding-bottom: 8px; margin-bottom: 4px; }

/* ── Closing call ────────────────────────────────────────────────────── */

.closer { text-align: center; padding: 74px 0 84px; }
.closer .quote {
  font-family: var(--display); font-size: clamp(1.35rem, 4.5vw, 2rem);
  color: var(--gold); line-height: 1.3; margin-bottom: 10px;
}
.closer .quote-en { color: var(--muted); font-size: .95rem; font-style: italic; }

/* ── Site footer ─────────────────────────────────────────────────────── */

.site-foot {
  border-top: 1px solid var(--line-soft);
  background: rgba(10, 7, 4, .6);
  padding: 40px 0 52px;
  font-size: .88rem;
}
.foot-links {
  display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center;
  margin-bottom: 22px;
}
.foot-links a { color: var(--cream); text-decoration: none; opacity: .85; }
.foot-links a:hover { color: var(--gold); opacity: 1; }
.foot-legal { text-align: center; color: var(--muted); font-size: .82rem; line-height: 1.8; }
.foot-legal a { color: var(--muted); }

/* ── Rules page extras ───────────────────────────────────────────────── */

.toc {
  border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px;
  background: rgba(30, 22, 16, .5); margin: 0 0 2.4rem;
}
.toc ol { margin: 0; padding-left: 1.2rem; }
.toc li { margin-bottom: .3rem; font-size: .95rem; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

.cards-table {
  width: 100%; border-collapse: collapse; margin: .4rem 0 1.6rem; font-size: .93rem;
}
.cards-table th, .cards-table td {
  text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.cards-table th { color: var(--gold-deep); font-weight: 600; font-size: .78rem; letter-spacing: 1.4px; text-transform: uppercase; }
.cards-table td:first-child { color: var(--cream-hi); white-space: nowrap; }
.table-scroll { overflow-x: auto; margin: 0 0 1.6rem; }

.callout {
  border-left: 2px solid var(--gold-deep); background: rgba(30, 22, 16, .55);
  padding: 16px 20px; border-radius: 0 10px 10px 0; margin: 1.4rem 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout .tag {
  display: block; font-size: .72rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: 6px;
}

.seq { color: var(--gold); font-family: var(--display); font-size: 1.05em; letter-spacing: 1px; }
.red { color: #e0736f; }