/* Refer & Earn card (shared/_refer_card.php) — home + referral page */
.refer-card {
  display: flex; flex-direction: column;
  width: 100%; max-width: 35rem;
  margin: 2.5rem auto;
  padding: 1.75rem 1.5rem;
  box-sizing: border-box;
  background: linear-gradient(160deg, #141b16, #0d1110);
  border: 0.0625rem solid #2f4133;
  border-radius: 1rem;
  font-family: var(--font-brand);
}
.refer-label {
  margin: 0 0 0.625rem;
  color: #4ec08a;
  font-size: 0.7188rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
}
.refer-headline {
  margin: 0 0 0.5rem;
  color: #f3f1ec;
  font-size: 1.3125rem; font-weight: 800;
  line-height: 1.2; letter-spacing: 0.02em;
}
.refer-amount {
  margin: 0 0 1.5rem;
  color: #e8b54a;
  font-size: 1.1875rem; font-weight: 800; letter-spacing: 0.03em;
}

.refer-linkbar {
  display: flex; align-items: center; gap: 0.625rem;
  min-height: 3.125rem; padding: 0 1rem; margin-bottom: 0.875rem;
  background: #0c0e13;
  border: 0.0625rem solid #2a2e3a;
  border-radius: 0.75rem;
}
.refer-linkbar svg { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; color: #8f93a3; }
/* Chain icon in the link field — click to copy */
.refer-link-copy {
  display: flex; flex: 0 0 auto;
  margin-left: -0.375rem; padding: 0.375rem;
  background: none; border: 0; border-radius: 0.5rem;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.refer-link-copy:focus-visible { outline: 0.125rem solid #f7d98a; }
@media (hover: hover) { .refer-link-copy:hover svg { color: #e8b54a; } }
.refer-link {
  flex: 1; min-width: 0;
  padding: 0.8125rem 0;
  background: transparent; border: 0; outline: none;
  color: #f3f1ec;
  font: inherit; font-size: 0.9375rem;
  text-overflow: ellipsis;
}
.refer-link::placeholder { color: #8f93a3; }

/* Share icons (referral page) — same tints as the lucky draw share icons */
.refer-socials { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 0.875rem; }
.refer-social {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  text-decoration: none;
  transition: transform 0.15s, filter 0.15s;
}
.refer-social iconify-icon { width: 1.75rem; height: 1.75rem; font-size: 1.75rem; }
.refer-social:active { transform: translateY(0.0625rem); }
@media (hover: hover) { .refer-social:hover { filter: brightness(1.15); } }
.refer-social.is-wa { color: #25D366; background: rgba(37, 211, 102, 0.14); }
.refer-social.is-fb { color: #1877f2; background: rgba(24, 119, 242, 0.14); }
.refer-social.is-tg { color: #229ed9; background: rgba(34, 158, 217, 0.14); }

.refer-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem; }
.refer-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3.25rem; padding: 0 0.625rem;
  background: #151922;
  border: 0.0625rem solid #2a2e3a;
  border-radius: 0.75rem;
  color: #f3f1ec;
  font-family: inherit; font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.05em;
  white-space: nowrap; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: filter 0.15s, transform 0.15s;
}
.refer-btn svg { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; }
.refer-btn:active { transform: translateY(0.0625rem); }
.refer-btn:focus-visible { outline: 0.1875rem solid #f7d98a; outline-offset: 0.125rem; }
@media (hover: hover) { .refer-btn:hover { filter: brightness(1.12); } }

.refer-btn-share { background: #13241a; border-color: #2f5c40; color: #7ddba6; }
.refer-btn-copy  { background: linear-gradient(180deg, #f7d98a, #d09a24); border-color: #d09a24; color: #1a1205; }
.refer-btn-info  { grid-column: 1 / -1; background: #1a1726; border-color: #3d3556; color: #b6a8e6; }

[data-theme="light"] .refer-card { background: linear-gradient(160deg, #f1f8f2, #fbfdfb); border-color: rgba(var(--green-rgb), 0.3); }
[data-theme="light"] .refer-linkbar { background: #fff; border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .refer-label { color: #25784b; }
[data-theme="light"] .refer-headline,
[data-theme="light"] .refer-link { color: var(--text-primary); }
[data-theme="light"] .refer-amount { color: #9a6d00; }
[data-theme="light"] .refer-linkbar svg,
[data-theme="light"] .refer-link::placeholder { color: #6b675e; }
[data-theme="light"] .refer-btn-share { background: rgba(var(--green-rgb), 0.12); border-color: rgba(var(--green-rgb), 0.35); color: #25784b; }
[data-theme="light"] .refer-btn-info  { background: rgba(128,90,213,0.1); border-color: rgba(128,90,213,0.3); color: #6b46c1; }

@media (max-width: 25rem) {
  .refer-card { padding: 1.5rem 1.25rem; }
  .refer-headline { font-size: 1.1875rem; }
  .refer-btn { min-height: 3.125rem; font-size: 0.875rem; }
}

/* ============================================================
   More Info — referral terms modal (shared/_refer_terms.php)
   ============================================================ */
.rt-overlay {
  --rt-sheet: #121317;
  --rt-sheet-2: #17181d;
  --rt-line: #2b2c33;
  --rt-row-line: #212228;
  --rt-gold: #e8c46a;
  --rt-gold-hi: #f7dc95;
  --rt-gold-deep: #c79a2c;
  --rt-text: #f4f2ec;
  --rt-soft: #cbc7bd;
  --rt-muted: #8d8a83;
  --rt-red: #ff8f86;
  --rt-red-line: rgba(217,69,60,0.45);
  --rt-red-text: #ffb9b3;
  --rt-red-body: #cfc2ae;
  --rt-green: #7fd6a8;
  --rt-blue: #9db4f7;
  --rt-bg: linear-gradient(180deg, #16171c, #0f1013);
  --rt-foot: rgba(10,10,13,0.6);
  --rt-close-bg: rgba(255,255,255,0.08);
  --rt-close-line: rgba(255,255,255,0.16);
  --rt-close-hover: rgba(255,255,255,0.16);

  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: rgba(4,4,6,0.72);
  opacity: 0; transition: opacity 0.2s ease;
  font-family: var(--font-brand);
}
.rt-overlay[hidden] { display: none; }
.rt-overlay.is-open { opacity: 1; }

[data-theme="light"] .rt-overlay {
  --rt-sheet: #f7f6f2;
  --rt-sheet-2: #efede6;
  --rt-line: #e2ded2;
  --rt-row-line: #ebe8df;
  --rt-gold: #9a6d00;
  --rt-gold-hi: #7a5600;
  --rt-gold-deep: #c79a2c;
  --rt-text: #16140f;
  --rt-soft: #3d3a33;
  --rt-muted: #6b675e;
  --rt-red: #c0322a;
  --rt-red-line: rgba(192,50,42,0.35);
  --rt-red-text: #a3241c;
  --rt-red-body: #5a4a40;
  --rt-green: #1f7a4a;
  --rt-blue: #3150b8;
  --rt-bg: #ffffff;
  --rt-foot: #faf9f6;
  --rt-close-bg: #f0eee8;
  --rt-close-line: #dcd8cc;
  --rt-close-hover: #e5e2d9;
  background: rgba(20,20,30,0.45);
}

.rt-sheet {
  position: relative;
  display: flex; flex-direction: column;
  width: 100%; max-width: 32.5rem; max-height: 100%;
  overflow: hidden;
  background: var(--rt-bg);
  border: 0.0625rem solid var(--rt-line);
  border-radius: 1.25rem;
  box-shadow: 0 1.625rem 4.375rem rgba(0,0,0,0.62);
  color: var(--rt-text);
  transform: translateY(0.75rem) scale(0.98);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.rt-overlay.is-open .rt-sheet { transform: none; }
[data-theme="light"] .rt-sheet { box-shadow: 0 1.5rem 4rem rgba(0,0,0,0.18); }

.rt-close {
  position: absolute; top: 0.875rem; right: 0.875rem; z-index: 3;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--rt-close-bg); border: 0.0625rem solid var(--rt-close-line); cursor: pointer;
  color: var(--rt-text);
  transition: background 0.15s, transform 0.15s;
}
.rt-close svg { width: 1.125rem; height: 1.125rem; }
.rt-close:hover { background: var(--rt-close-hover); }
.rt-close:active { transform: scale(0.94); }
.rt-close:focus-visible { outline: 0.125rem solid var(--rt-gold); outline-offset: 0.125rem; }

.rt-head { flex: 0 0 auto; padding: 1.5rem 3.5rem 0.875rem; text-align: center; }
.rt-title {
  margin: 0 0 0.625rem;
  color: var(--rt-text);
  font-size: 1.5rem; font-weight: 800; line-height: 1.16; letter-spacing: -0.01em;
  text-wrap: balance;
}
.rt-title em { display: block; font-style: normal; color: var(--rt-gold); }
.rt-sub { margin: 0; font-size: 0.8125rem; color: var(--rt-muted); }

.rt-body {
  flex: 1 1 auto; overflow-y: auto;
  padding: 0.25rem 1.375rem 1.125rem;
  overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--rt-gold-deep) transparent;
}
.rt-body::-webkit-scrollbar { width: 0.4375rem; }
.rt-body::-webkit-scrollbar-thumb { background: var(--rt-gold-deep); border-radius: 99px; }

.rt-big { margin: 0.25rem 0 1.25rem; font-size: 1.125rem; line-height: 1.35; font-weight: 600; color: var(--rt-text); }
.rt-big b { color: var(--rt-gold); font-weight: 800; }
.rt-say { margin: 0 0 0.75rem; font-size: 0.8125rem; line-height: 1.5; color: var(--rt-muted); }
.rt-say b { color: var(--rt-gold-hi); }
.rt-levels + .rt-say, .rt-eg + .rt-say { margin-top: 0.75rem; }

.rt-sec { display: flex; align-items: center; gap: 0.75rem; margin: 1.5rem 0 0.75rem; }
.rt-sec h3 {
  margin: 0; white-space: nowrap;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--rt-gold-hi);
}
.rt-sec i { flex: 1; display: block; height: 0.0625rem; background: linear-gradient(90deg, var(--rt-gold-deep), transparent); }
.rt-sec.is-warn h3 { color: var(--rt-red); }
.rt-sec.is-warn i { background: linear-gradient(90deg, #b8322a, transparent); }

/* steps */
.rt-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; counter-reset: rt-st; }
.rt-steps li {
  display: flex; gap: 0.75rem; align-items: flex-start;
  padding: 0.75rem 0.875rem;
  background: var(--rt-sheet); border: 0.0625rem solid var(--rt-line); border-radius: 0.75rem;
}
.rt-steps li::before {
  counter-increment: rt-st; content: counter(rt-st);
  flex: 0 0 1.5rem; height: 1.5rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 0.09375rem solid var(--rt-gold-deep);
  color: var(--rt-gold); font-size: 0.75rem; font-weight: 700;
}
.rt-steps h4 {
  margin: 0 0 0.1875rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rt-gold-hi);
}
.rt-steps p { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--rt-soft); }

/* levels */
.rt-levels { border: 0.0625rem solid var(--rt-line); border-radius: 0.875rem; overflow: hidden; background: var(--rt-sheet); }
.rt-lrow {
  display: grid; grid-template-columns: 2.75rem 1fr auto; gap: 0.625rem; align-items: center;
  padding: 0.625rem 0.875rem;
  border-bottom: 0.0625rem solid var(--rt-row-line);
}
.rt-lrow:last-child { border-bottom: 0; }
.rt-lrow.is-head { background: var(--rt-sheet-2); padding-block: 0.625rem; }
.rt-lrow.is-head span { font-size: 0.6563rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rt-muted); }
.rt-right { text-align: right; }
.rt-lvl {
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 0.09375rem solid var(--rt-gold-deep);
  color: var(--rt-gold); font-size: 0.75rem; font-weight: 700;
}
.rt-refs { font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--rt-text); }
.rt-rw { text-align: right; line-height: 1.2; }
.rt-rw b { font-size: 1.0625rem; font-weight: 800; color: var(--rt-gold); }

/* example */
.rt-eg { padding: 0.25rem 0.875rem; background: var(--rt-sheet); border: 0.0625rem solid var(--rt-line); border-radius: 0.875rem; }
.rt-egrow {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem;
  padding: 0.625rem 0;
  border-bottom: 0.0625rem solid var(--rt-row-line);
}
.rt-egrow:last-child { border-bottom: 0; }
.rt-egrow span { font-size: 0.8125rem; color: var(--rt-soft); }
.rt-egrow b { font-size: 0.9375rem; font-weight: 700; color: var(--rt-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rt-egrow b small { margin-left: 0.1875rem; font-size: 0.75rem; font-weight: 600; color: var(--rt-muted); }
.rt-egrow.is-total b { font-size: 1.125rem; color: var(--rt-gold); }

/* excluded games */
.rt-excl {
  padding: 0.875rem; text-align: center;
  border: 0.0625rem solid var(--rt-red-line); border-radius: 0.875rem;
  background: linear-gradient(180deg, rgba(217,69,60,0.1), rgba(217,69,60,0.03));
}
.rt-excl .rt-excl-names { margin: 0 0 0.5rem; font-size: 0.9375rem; font-weight: 800; letter-spacing: 0.05em; color: var(--rt-text); }
.rt-excl-names span { white-space: nowrap; }
.rt-excl p { margin: 0; font-size: 0.8125rem; line-height: 1.55; color: var(--rt-red-body); }
.rt-excl b { color: var(--rt-gold-hi); }

/* statuses */
.rt-stats { display: flex; flex-direction: column; gap: 0.625rem; }
.rt-st {
  display: flex; gap: 0.75rem; align-items: flex-start;
  padding: 0.75rem 0.8125rem;
  background: var(--rt-sheet); border: 0.0625rem solid var(--rt-line); border-radius: 0.75rem;
}
.rt-st p { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--rt-soft); }
.rt-pill {
  flex: 0 0 auto; min-width: 6.75rem; margin-top: 0.0625rem; padding: 0.3125rem 0.625rem;
  border-radius: 999px; text-align: center; white-space: nowrap;
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.rt-pill.is-processing { background: rgba(232,196,106,0.14); color: var(--rt-gold); border: 0.0625rem solid rgba(232,196,106,0.42); }
.rt-pill.is-pending    { background: rgba(127,214,168,0.14); color: var(--rt-green); border: 0.0625rem solid rgba(127,214,168,0.42); }
.rt-pill.is-success    { background: rgba(140,170,245,0.14); color: var(--rt-blue); border: 0.0625rem solid rgba(140,170,245,0.4); }
.rt-pill.is-expired    { background: rgba(255,143,134,0.12); color: var(--rt-red); border: 0.0625rem solid rgba(255,143,134,0.4); }

/* rules */
.rt-pts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.rt-pts li { position: relative; padding-left: 1.375rem; font-size: 0.8125rem; line-height: 1.55; color: var(--rt-soft); }
.rt-pts li::before {
  content: "\203A"; position: absolute; left: 0.25rem; top: -0.0625rem;
  color: var(--rt-gold); font-size: 1rem; font-weight: 700; line-height: 1.5;
}
.rt-pts b { color: var(--rt-gold-hi); font-weight: 700; }
.rt-pts b.is-warn { color: var(--rt-red); }

.rt-notice {
  display: flex; gap: 0.6875rem; margin-top: 1.375rem; padding: 0.875rem;
  border: 0.0625rem solid var(--rt-red-line); border-radius: 0.875rem;
  background: rgba(217,69,60,0.07);
}
.rt-notice svg { width: 1.0625rem; height: 1.0625rem; flex: 0 0 auto; margin-top: 0.0625rem; color: var(--rt-red); }
.rt-notice b { display: block; margin-bottom: 0.25rem; font-size: 0.8125rem; line-height: 1.4; color: var(--rt-red-text); }
.rt-notice p { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--rt-red-body); }

.rt-foot {
  flex: 0 0 auto;
  padding: 0.875rem 1.125rem calc(1.125rem + env(safe-area-inset-bottom, 0px));
  border-top: 0.0625rem solid var(--rt-line);
  background: var(--rt-foot);
}
.rt-ok {
  width: 100%; min-height: 3rem; border: 0; border-radius: 0.75rem; cursor: pointer;
  background: linear-gradient(180deg, #f7dc95, #d2a534 60%, #c2932a);
  box-shadow: 0 0.375rem 1.25rem rgba(199,154,44,0.26);
  color: #1c1503; font-family: inherit; font-size: 0.9375rem; font-weight: 800;
}
.rt-ok:focus-visible { outline: 0.1875rem solid var(--rt-gold-hi); outline-offset: 0.1875rem; }

@media (max-width: 26.25rem) {
  .rt-overlay { padding: 0; }
  .rt-sheet { max-width: none; height: 100%; border-radius: 0; border: 0; }
  .rt-head { padding: 1.25rem 3.25rem 0.75rem; }
  .rt-title { font-size: 1.375rem; }
  .rt-body { padding-inline: 1rem; }
  .rt-rw b { font-size: 1rem; }
}
@media (max-width: 25rem) {
  .rt-st { flex-direction: column; gap: 0.4375rem; }
  .rt-pill { min-width: 0; }
}

/* ============================================================
   Share picker — Drawer (mobile fallback) / Modal (desktop)
   ============================================================ */
.ref-share { padding: 1.5rem 1.25rem 1.25rem; text-align: center; font-family: var(--font-brand); }
.ref-share-title { margin: 0 0 0.25rem; color: var(--gold-text); font-size: 1.1875rem; font-weight: 800; }
.ref-share-sub { margin: 0 0 1rem; color: var(--text-secondary); font-size: 0.8125rem; line-height: 1.5; }
.ref-share-link {
  margin-bottom: 1rem; padding: 0.625rem 0.75rem;
  background: var(--bg-field, rgba(255,255,255,0.06));
  border: 0.0625rem solid var(--border-field, rgba(255,255,255,0.12));
  border-radius: 0.625rem;
  color: var(--text-primary); font-size: 0.8125rem; word-break: break-all;
}
.ref-share-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; margin-bottom: 0.625rem; }
.ref-share-app, .ref-share-copy, .ref-share-close {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0 0.75rem; border-radius: 0.75rem;
  font-family: inherit; font-size: 0.9375rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
}
.ref-share-app { border: 0; color: #fff; }
.ref-share-app.is-wa { background: #1faa55; }
.ref-share-app.is-tg { background: #1f8fc8; }
.ref-share-app.is-fb { background: #1877f2; }
.ref-share-copy {
  width: 100%; margin-bottom: 0.625rem; border: 0.0625rem solid #d09a24;
  background: linear-gradient(180deg, #f7d98a, #d09a24); color: #1a1205;
}
.ref-share-close {
  width: 100%; background: transparent;
  border: 0.0625rem solid var(--border-field, rgba(255,255,255,0.15));
  color: var(--text-secondary);
}
@media (hover: hover) {
  .ref-share-app:hover, .ref-share-copy:hover { filter: brightness(1.08); }
  .ref-share-close:hover { color: var(--text-primary); }
}
[data-theme="light"] .ref-share-title { color: #8a6000; }