/* RewardGift app styles (from the original single-file app) */
:root {
  --x-bg: #03070f;
  --x-card: #1a1f2b;
  --x-card-2: #222837;
  --x-line: rgba(255, 255, 255, 0.08);
  --x-green: #00e676;
  --x-green-soft: rgba(0, 230, 118, 0.14);
  --x-glow: 0 0 22px rgba(0, 230, 118, 0.45);
  --x-dim: #9aa3b8;
  --x-red: #ff5c6c;
  --x-amber: #ffb547;
}
html, body { background: var(--x-bg); color: #fff; }
body { font-family: var(--sans); -webkit-tap-highlight-color: transparent; }
button, input { font-family: inherit; }
.x-app {
  max-width: 430px; width: 100%; margin: 0 auto; min-height: 100dvh;
  padding: 0 0 calc(104px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 14px;
}
/* header */
.x-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; }
.x-brand { display: flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.x-brand b { color: var(--x-green); text-shadow: var(--x-glow); }
.x-brand__name { display: flex; flex-direction: column; line-height: 1.05; }
.x-brand__name strong { font-size: 24px; font-weight: 700; }
.x-brand__name small { font: var(--type-caption); color: var(--text-secondary); letter-spacing: 0; }
.x-tag {
  font: 600 12px/1 var(--sans); letter-spacing: 0.08em; padding: 5px 8px; border-radius: var(--r-pill);
  background: #0a2a1a; color: var(--x-green); border: 1px solid rgba(0, 230, 118, 0.35);
}
.x-bal {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill);
  background: var(--x-card); border: 1px solid rgba(0, 230, 118, 0.35); font-weight: 600; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 14px rgba(0, 230, 118, 0.18);
}
.x-bal i { width: 10px; height: 10px; border-radius: 50%; background: var(--x-green); box-shadow: var(--x-glow); }
.x-bal small { color: var(--x-dim); font-weight: 500; }
.x-rate { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--x-dim); }
.x-rate b { color: #fff; font-weight: 600; }
/* generic */
.x-view { display: flex; flex-direction: column; gap: 14px; }
.x-view[hidden] { display: none; }
.x-h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin: 4px 0 0; }
.x-card {
  background: var(--x-card); border: 1px solid var(--x-line); border-radius: var(--r-l); padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.x-card h3 { font-size: 17px; font-weight: 600; }
.x-muted { color: var(--x-dim); font-size: 14px; line-height: 1.45; }
.x-label { font-size: 12px; color: var(--x-dim); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; }
.x-btn {
  appearance: none; border: 0; cursor: pointer; min-height: 50px; padding: 0 18px; border-radius: var(--r-m);
  background: var(--x-green); color: #03140a; font-size: 16px; font-weight: 600; width: 100%;
  box-shadow: var(--x-glow); touch-action: manipulation;
  transition: transform var(--dur-quick) var(--ease-out), opacity var(--dur-quick) ease;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.x-btn:active { transform: scale(0.97); }
.x-btn:disabled { background: var(--x-card-2); color: var(--x-dim); box-shadow: none; cursor: not-allowed; transform: none; }
.x-btn--ghost { background: transparent; color: var(--x-green); border: 1px solid rgba(0, 230, 118, 0.45); box-shadow: none; }
.x-btn--sm { min-height: var(--tap); width: auto; font-size: 14px; }
/* earn */
.x-points { text-align: center; padding: 6px 0 0; }
.x-points__num {
  display: block; font-size: 56px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; color: var(--x-green);
  text-shadow: var(--x-glow); font-variant-numeric: tabular-nums;
}
.x-points__num span { font-size: 22px; margin-left: 6px; }
.x-tapzone { position: relative; display: grid; place-items: center; padding: 10px 0; }
.x-tap {
  appearance: none; cursor: pointer; width: min(68vw, 240px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #0b1410 0%, #000 70%); color: #fff;
  border: 6px solid var(--x-green); touch-action: manipulation; user-select: none; -webkit-user-select: none;
  box-shadow: 0 0 0 10px rgba(0, 230, 118, 0.08), 0 0 40px rgba(0, 230, 118, 0.5), inset 0 0 30px rgba(0, 230, 118, 0.25);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transition: transform 90ms ease, box-shadow 160ms ease, opacity 160ms ease;
}
.x-tap b { font-size: 46px; font-weight: 600; letter-spacing: 0.04em; }
.x-tap span { font-size: 14px; color: var(--x-green); font-weight: 500; }
.x-tap.is-press { transform: scale(0.94); box-shadow: 0 0 0 14px rgba(0, 230, 118, 0.12), 0 0 60px rgba(0, 230, 118, 0.7), inset 0 0 40px rgba(0, 230, 118, 0.35); }
.x-tap:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; border-color: var(--x-card-2); }
.x-float {
  position: absolute; pointer-events: none; font-size: 24px; font-weight: 600; color: var(--x-green);
  text-shadow: var(--x-glow); animation: x-float 800ms var(--ease-out) forwards; transform: translate(-50%, -50%);
}
@keyframes x-float { to { transform: translate(-50%, -150%); opacity: 0; } }
.x-bar { height: 10px; border-radius: var(--r-pill); background: var(--x-card-2); overflow: hidden; }
.x-bar i { display: block; height: 100%; background: var(--x-green); box-shadow: var(--x-glow); border-radius: inherit; transition: width 250ms var(--ease-out); }
.x-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; }
.x-row b { font-variant-numeric: tabular-nums; }
.x-warn { color: var(--x-amber); font-size: 14px; text-align: center; }
.x-warn[hidden] { display: none; }
.x-daily { flex-direction: row; align-items: center; justify-content: space-between; }
.x-daily .x-btn { width: auto; }
/* overlays */
.x-overlay {
  position: fixed; inset: 0; z-index: 50; background: rgba(3, 7, 15, 0.94); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.x-overlay[hidden] { display: none; }
.x-sheet {
  position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.6);
  display: flex; align-items: flex-end; justify-content: center;
}
.x-sheet[hidden] { display: none; }
.x-sheet__panel {
  width: min(100%, 430px); background: var(--x-card); border: 1px solid var(--x-line); border-bottom: 0;
  border-radius: var(--r-l) var(--r-l) 0 0; padding: 18px 16px calc(20px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 8px; animation: x-up 220ms var(--ease-out);
}
@keyframes x-up { from { transform: translateY(40px); opacity: 0; } }
.x-opt {
  appearance: none; display: flex; justify-content: space-between; align-items: center; min-height: 54px; padding: 0 16px;
  border-radius: var(--r-s); border: 1px solid var(--x-line); background: var(--x-card-2); color: #fff; font-size: 15px; cursor: pointer; text-align: left;
}
.x-opt[aria-checked="true"] { border-color: var(--x-green); box-shadow: inset 0 0 0 1px var(--x-green); }
.x-opt[aria-checked="true"]::after { content: "✓"; color: var(--x-green); font-weight: 600; }
.x-toast {
  position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 60; transform: translate(-50%, 20px);
  background: var(--x-card-2); border: 1px solid rgba(0, 230, 118, 0.4); color: #fff; padding: 10px 16px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity 200ms ease, transform 200ms var(--ease-out); white-space: nowrap;
}
.x-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
/* tab bar */
.x-tabs {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 30; width: min(100%, 430px);
  display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 4px calc(8px + env(safe-area-inset-bottom));
  background: rgba(10, 14, 22, 0.92); backdrop-filter: blur(14px); border-top: 1px solid var(--x-line);
}
.x-tab {
  appearance: none; background: none; border: 0; color: var(--x-dim); cursor: pointer; min-height: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 500;
  border-radius: var(--r-s); touch-action: manipulation;
}
.x-tab svg { width: 24px; height: 24px; }
.x-tabs .x-tab { gap: 3px; padding: 0 2px; white-space: nowrap; min-width: 0; }
.x-tabs .x-tab svg { width: 22px; height: 22px; }
.x-tab[aria-selected="true"] { color: var(--x-green); }
.x-tab[aria-selected="true"] svg { filter: drop-shadow(0 0 6px rgba(0, 230, 118, 0.7)); }
/* games hub */
.x-game-card {
  appearance: none; text-align: left; color: #fff; cursor: pointer; width: 100%;
  background: var(--x-card); border: 1px solid var(--x-line); border-radius: var(--r-l); padding: 16px;
  display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; align-items: center; touch-action: manipulation;
  transition: transform var(--dur-quick) var(--ease-out), border-color var(--dur-quick) ease;
}
.x-game-card:active { transform: scale(0.98); border-color: rgba(0, 230, 118, 0.5); }
.x-game-card__icon { width: 76px; height: 76px; border-radius: var(--r-m); display: grid; place-items: center; font-size: 40px; }
.x-game-card h3 { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.x-game-card p { font-size: 13px; color: var(--x-dim); line-height: 1.4; }
.x-game-card__go { color: var(--x-green); font-size: 24px; }
.x-reward { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--x-green); background: #0a2a1a; padding: 4px 8px; border-radius: var(--r-pill); }
.x-gamebar { display: flex; align-items: center; gap: 10px; }
.x-back {
  appearance: none; width: var(--tap); height: var(--tap); border-radius: 50%; border: 1px solid var(--x-line);
  background: var(--x-card); color: #fff; font-size: 20px; cursor: pointer; display: grid; place-items: center; flex: none;
}
.x-gamebar h2 { font-size: 20px; font-weight: 600; flex: 1; }
.x-hud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.x-hud div { background: var(--x-card); border: 1px solid var(--x-line); border-radius: var(--r-s); padding: 10px 12px; }
.x-hud span { display: block; font-size: 12px; color: var(--x-dim); }
.x-hud b { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.x-stage { position: relative; }
.x-endcard {
  position: absolute; inset: 0; z-index: 5; border-radius: var(--r-l); background: rgba(3, 7, 15, 0.88); backdrop-filter: blur(4px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center;
}
.x-endcard[hidden] { display: none; }
.x-endcard h3 { font-size: 24px; font-weight: 600; }
.x-endcard p { color: var(--x-dim); font-size: 16px; }
.x-endcard p b { color: var(--x-green); }
.x-endcard .x-btn { width: auto; min-width: 180px; }
/* sweet match */
.x-m3 {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; padding: 8px; border-radius: var(--r-l);
  background: var(--x-card); border: 1px solid var(--x-line); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
}
.x-candy {
  appearance: none; border: 0; padding: 0; aspect-ratio: 1; border-radius: 10px; cursor: pointer; display: grid; place-items: center;
  font-size: clamp(20px, 6.6vw, 30px); line-height: 1; background: var(--x-card-2); position: relative;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.x-candy.t0 { background: #3a1f3a; } .x-candy.t1 { background: #3b2140; } .x-candy.t2 { background: #33251c; }
.x-candy.t3 { background: #3d2430; } .x-candy.t4 { background: #362d1e; } .x-candy.t5 { background: #22283f; }
.x-candy.is-sel { box-shadow: 0 0 0 2px var(--x-green), var(--x-glow); transform: scale(1.06); z-index: 2; }
.x-candy.is-move { z-index: 3; transition: transform 150ms ease; }
.x-candy.is-pop { animation: x-pop 240ms ease-in forwards; }
@keyframes x-pop { 40% { transform: scale(1.25); filter: brightness(1.6); } 100% { transform: scale(0); opacity: 0; } }
.x-candy.is-fall { animation: x-fall 300ms cubic-bezier(0.5, 0, 0.75, 1.3) both; }
@keyframes x-fall { from { transform: translateY(calc(var(--d) * -108%)); } }
.is-shake { animation: x-shake 320ms ease; }
@keyframes x-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.x-combo { text-align: center; min-height: 22px; font-weight: 600; color: var(--x-green); text-shadow: var(--x-glow); font-size: 16px; }
/* arrow escape */
/* Arrow Escape: its own white and green screen */
#g-ae {
  --ae-bg: #ffffff; --ae-surface: #f4fbf6; --ae-green: #00c853; --ae-green-2: #00e676; --ae-ink: #0b3d1f;
  --ae-ink-2: #4a6b57; --ae-tile: #e8f9ee; --ae-tile-line: #bdebcd; --ae-grid: #dcf2e3; --ae-icon: #00a344;
  --ae-red: #e5394b; --ae-red-soft: #ffe8eb;
  position: fixed; inset: 0; z-index: 35; overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(180deg, var(--ae-bg) 0%, var(--ae-surface) 100%); color: var(--ae-ink);
  padding: calc(12px + env(safe-area-inset-top)) 12px calc(20px + env(safe-area-inset-bottom));
  display: block;
}
#g-ae[hidden] { display: none; }
html:has(#v-games:not([hidden]) #g-ae:not([hidden])) { overflow: hidden; }
.x-ae-wrap { max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.x-ae-bar { display: flex; align-items: center; gap: 10px; }
.x-ae-back {
  appearance: none; width: var(--tap); height: var(--tap); flex: none; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: var(--ae-bg); border: 1px solid var(--ae-grid); color: var(--ae-ink); box-shadow: 0 2px 8px rgba(11, 61, 31, 0.08);
  transition: transform var(--dur-quick) var(--ease-out);
}
.x-ae-back:active { transform: scale(0.94); }
.x-ae-back svg { width: 20px; height: 20px; }
.x-ae-bar h2 { flex: 1; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--ae-ink); margin: 0; }
.x-ae-pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: var(--r-pill);
  background: var(--ae-tile); border: 1px solid var(--ae-tile-line); color: var(--ae-ink); font-size: 13px; font-weight: 500;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.x-ae-pill b { font-weight: 600; color: #007a33; }
.x-ae-pill--solid { background: var(--ae-green); border-color: var(--ae-green); color: #ffffff; }
.x-ae-pill--solid b { color: #ffffff; }
.x-ae-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.x-ae-hearts { display: inline-flex; gap: 4px; align-items: center; }
.x-ae-hearts svg { width: 22px; height: 22px; transition: transform 200ms var(--ease-out); }
.x-ae-hearts .is-full { color: var(--ae-green); filter: drop-shadow(0 2px 3px rgba(0, 200, 83, 0.3)); }
.x-ae-hearts .is-lost { color: #c7dccf; transform: scale(0.86); }
.x-ae-card {
  background: var(--ae-bg); border-radius: var(--r-l); padding: 10px; position: relative;
  box-shadow: 0 1px 2px rgba(11, 61, 31, 0.06), 0 12px 32px rgba(11, 61, 31, 0.1); border: 1px solid #e6f4ea;
  width: min(100%, calc(100vw - 24px), 420px); box-sizing: border-box; margin: 0 auto; overflow: hidden;
  display: flex; justify-content: center;
}
.x-ae {
  --t: 44px;
  display: grid; grid-template-columns: repeat(var(--n, 5), var(--t)); grid-auto-rows: var(--t); gap: 5px; overflow: hidden;
  padding: 4px; border-radius: var(--r-m); background: var(--ae-surface); width: max-content; max-width: 100%; box-sizing: border-box;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.x-arrow {
  appearance: none; padding: 0; width: var(--t); height: var(--t); border-radius: calc(var(--t) * 0.26); cursor: pointer;
  background: var(--ae-tile); border: 1px solid var(--ae-tile-line); color: var(--ae-icon);
  box-shadow: inset 0 -2px 0 rgba(0, 163, 68, 0.12), 0 1px 2px rgba(11, 61, 31, 0.06);
  display: grid; place-items: center; position: relative; z-index: 1;
  transition: transform 420ms cubic-bezier(0.5, 0, 0.75, 0), opacity 420ms ease-in, background 150ms ease;
}
.x-arrow:hover { background: #dcf6e5; }
.x-arrow:active:not(.is-out) { transform: scale(0.94); transition-duration: 90ms; }
.x-arrow:focus-visible { outline: 2px solid var(--ae-green); outline-offset: 2px; }
.x-arrow svg { width: 56%; height: 56%; transition: transform 0s; }
.x-arrow.d-r svg { transform: rotate(90deg); } .x-arrow.d-d svg { transform: rotate(180deg); } .x-arrow.d-l svg { transform: rotate(-90deg); }
.x-arrow.is-bad { animation: x-ae-shake 320ms ease, x-ae-flash 320ms ease; }
@keyframes x-ae-shake { 20%, 60% { translate: -5px 0; } 40%, 80% { translate: 5px 0; } }
@keyframes x-ae-flash { 0%, 70% { background: var(--ae-red-soft); border-color: var(--ae-red); color: var(--ae-red); } }
.x-arrow.is-out { opacity: 0; pointer-events: none; z-index: 2; }
.x-empty { width: var(--t); height: var(--t); border-radius: calc(var(--t) * 0.26); border: 1px dashed var(--ae-grid); box-sizing: border-box; }
.x-ae-hint { text-align: center; font-size: 13px; line-height: 1.45; color: var(--ae-ink-2); margin: 0; }
/* end modal */
.x-ae-modal {
  position: fixed; inset: 0; z-index: 36; display: grid; place-items: center; padding: 24px;
  background: rgba(11, 61, 31, 0.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: x-ae-fade 200ms ease both;
}
.x-ae-modal[hidden] { display: none; }
.x-ae-dialog {
  position: relative; width: min(100%, 340px); background: var(--ae-bg); border-radius: var(--r-xl); padding: 32px 24px 24px;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px;
  box-shadow: 0 24px 60px rgba(11, 61, 31, 0.22); animation: x-ae-rise 320ms var(--ease-out) both;
}
@keyframes x-ae-fade { from { opacity: 0; } }
@keyframes x-ae-rise { from { opacity: 0; transform: translateY(16px) scale(0.96); } }
.x-ae-badge {
  width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; position: relative; margin-bottom: 4px;
  background: var(--ae-green); color: #ffffff; box-shadow: 0 8px 22px rgba(0, 200, 83, 0.35);
}
.x-ae-badge svg { width: 34px; height: 34px; }
.x-ae-badge .x-ae-ico-lose { display: none; }
.x-ae-modal:not([data-win="1"]) .x-ae-badge { background: var(--ae-red-soft); color: var(--ae-red); box-shadow: none; }
.x-ae-modal:not([data-win="1"]) .x-ae-ico-win { display: none; }
.x-ae-modal:not([data-win="1"]) .x-ae-ico-lose { display: block; }
.x-ae-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.x-ae-modal:not([data-win="1"]) .x-ae-burst { display: none; }
.x-ae-burst i {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--ae-green-2); opacity: 0;
  animation: x-ae-pop 900ms var(--ease-out) 120ms both;
}
.x-ae-burst i:nth-child(3n) { width: 7px; height: 7px; left: -3.5px; top: -3.5px; background: var(--ae-green); }
.x-ae-burst i:nth-child(4n) { border-radius: 2px; background: #9be7b6; }
@keyframes x-ae-pop {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(0.4); }
  60% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--r, 64px))) scale(1); }
}
.x-ae-dialog h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ae-ink); margin: 0; }
.x-ae-dialog p { font-size: 15px; color: var(--ae-ink-2); margin: 0; line-height: 1.45; }
.x-ae-dialog p b { display: block; font-size: 32px; font-weight: 600; color: var(--ae-green); letter-spacing: -0.02em; margin-bottom: 2px; }
.x-ae-btn {
  appearance: none; border: 0; cursor: pointer; margin-top: 10px; min-height: 52px; width: 100%; border-radius: var(--r-pill);
  background: var(--ae-green); color: #ffffff; font-size: 16px; font-weight: 600; box-shadow: 0 8px 20px rgba(0, 200, 83, 0.32);
  transition: transform var(--dur-quick) var(--ease-out), background var(--dur-quick) ease;
}
.x-ae-btn:hover { background: #00b84c; }
.x-ae-btn:active { transform: scale(0.97); }
.x-ae-btn:focus-visible { outline: 3px solid #9be7b6; outline-offset: 3px; }
@media (max-width: 360px) { .x-ae-card { padding: 6px; } .x-ae { gap: 4px; padding: 3px; } #g-ae { padding-left: 8px; padding-right: 8px; } }
/* redeem */
.x-balcard { background: linear-gradient(135deg, #0f2a1d, var(--x-card) 60%); border-color: rgba(0, 230, 118, 0.3); }
.x-balcard__num { font-size: 34px; font-weight: 600; color: var(--x-green); text-shadow: var(--x-glow); font-variant-numeric: tabular-nums; }
.x-balcard__num small { font-size: 16px; }
.x-field { display: flex; flex-direction: column; gap: 8px; }
.x-field label, .x-field .x-flabel { font-size: 14px; font-weight: 500; }
.x-input {
  min-height: 52px; padding: 0 14px; border-radius: var(--r-s); border: 1px solid var(--x-line); background: var(--x-card-2);
  color: #fff; font-size: 16px; width: 100%; box-sizing: border-box;
}
.x-input:focus { outline: none; border-color: var(--x-green); box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.18); }
.x-input.is-err { border-color: var(--x-red); }
.x-chain {
  appearance: none; min-height: 52px; padding: 0 14px; border-radius: var(--r-s); border: 1px solid var(--x-line); background: var(--x-card-2);
  color: #fff; font-size: 16px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; width: 100%;
}
.x-chain span:last-child { color: var(--x-green); font-size: 14px; font-weight: 500; }
.x-redwarn { color: var(--x-red); font-size: 13px; }
.x-help { font-size: 13px; color: var(--x-dim); }
.x-help.is-err { color: var(--x-red); }
.x-eq { font-size: 15px; font-weight: 600; color: var(--x-green); }
.x-banner {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-s);
  background: rgba(255, 181, 71, 0.1); border: 1px solid rgba(255, 181, 71, 0.35); color: #ffd79a; font-size: 13px; line-height: 1.45;
}
.x-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.x-hist li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px 0; border-top: 1px solid var(--x-line); font-size: 14px; }
.x-hist li:first-child { border-top: 0; }
.x-hist small { color: var(--x-dim); font-size: 12px; }
.x-status { grid-row: span 2; align-self: center; font-size: 12px; font-weight: 500; color: var(--x-amber); background: rgba(255, 181, 71, 0.12); padding: 5px 9px; border-radius: var(--r-pill); }
/* how it works */
.x-flow { display: flex; flex-direction: column; gap: 8px; }
.x-flow div { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.x-flow i { font-style: normal; width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #0a2a1a; color: #fff; font-size: 18px; }
.x-faq { background: var(--x-card); border: 1px solid var(--x-line); border-radius: var(--r-m); }
.x-faq summary { list-style: none; cursor: pointer; min-height: 56px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 15px; }
.x-faq summary::-webkit-details-marker { display: none; }
.x-faq summary::after { content: "+"; color: var(--x-green); font-size: 22px; font-weight: 500; }
.x-faq[open] summary::after { content: "–"; }
.x-faq p { padding: 0 16px 16px; color: var(--x-dim); font-size: 14px; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) {
  .x-candy.is-fall, .x-candy.is-pop, .x-float, .is-shake, .x-arrow.is-bad, .x-ae-modal, .x-ae-dialog { animation-duration: 1ms; }
  .x-ae-burst { display: none; }
  .x-arrow { transition-duration: 150ms; }
}
/* install card + sheet */
.x-install { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 44px 14px 14px; position: relative; }
.x-install[hidden] { display: none; }
.x-install__ico { width: 44px; height: 44px; flex: none; border-radius: var(--r-s); display: grid; place-items: center; background: #0a2a1a; font-size: 22px; }
.x-install__txt { flex: 1 1 150px; min-width: 0; }
.x-install__txt h3 { font-size: 15px; font-weight: 600; margin: 0 0 2px; }
.x-install__txt p { font-size: 13px; color: var(--x-dim); margin: 0; line-height: 1.4; }
.x-install .x-btn { width: auto; flex: none; }
.x-install__x {
  position: absolute; top: 2px; right: 2px; width: var(--tap); height: var(--tap); border: 0; background: none; border-radius: 50%;
  color: var(--x-dim); font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.x-inst-step { background: var(--x-card-2); border: 1px solid var(--x-line); border-radius: var(--r-s); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.x-inst-step b { font-size: 15px; font-weight: 600; }
.x-inst-step p { font-size: 14px; color: var(--x-dim); line-height: 1.45; margin: 0; }
.x-inst-step.is-mine { border-color: rgba(0, 230, 118, 0.5); }
.x-inst-step.is-mine b::after { content: " · your device"; color: var(--x-green); font-weight: 500; font-size: 12px; }
/* bubble pop: colorful full screen */
#g-bp {
  --bp-ink: #1c1f4a; --bp-ink-2: #4b4f7a;
  position: fixed; inset: 0; z-index: 35; overflow: hidden; overscroll-behavior: none;
  background: linear-gradient(180deg, #bfe7ff 0%, #d3dcff 50%, #e8d6ff 100%); color: var(--bp-ink);
  padding: calc(10px + env(safe-area-inset-top)) 12px calc(10px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 10px;
}
#g-bp[hidden] { display: none; }
html:has(#v-games:not([hidden]) #g-bp:not([hidden])) { overflow: hidden; }
.x-bp-bar, .x-bp-hud, .x-bp-stage, .x-bp-hint { width: 100%; max-width: 460px; margin: 0 auto; }
.x-bp-bar { display: flex; align-items: center; gap: 10px; }
.x-bp-back {
  appearance: none; width: var(--tap); height: var(--tap); flex: none; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: #ffffff; border: 1px solid rgba(28, 31, 74, 0.1); color: var(--bp-ink); box-shadow: 0 2px 8px rgba(28, 31, 74, 0.1);
}
.x-bp-back svg { width: 20px; height: 20px; }
.x-bp-bar h2 { flex: 1; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 0; color: var(--bp-ink); }
.x-bp-hud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.x-bp-hud div { background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: var(--r-s); padding: 6px 10px; }
.x-bp-hud span { display: block; font-size: 12px; color: var(--bp-ink-2); }
.x-bp-hud b { font-size: 18px; font-weight: 600; color: var(--bp-ink); font-variant-numeric: tabular-nums; }
.x-bp-stage { flex: 1; min-height: 0; position: relative; }
.x-bp-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; }
.x-bp-hint { text-align: center; font-size: 12px; color: var(--bp-ink-2); margin: 0; }
.x-bp-modal {
  position: fixed; inset: 0; z-index: 36; display: grid; place-items: center; padding: 24px;
  background: rgba(28, 31, 74, 0.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: x-ae-fade 200ms ease both;
}
.x-bp-modal[hidden] { display: none; }
.x-bp-dialog {
  width: min(100%, 340px); background: #ffffff; border-radius: var(--r-xl); padding: 28px 24px 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: 0 24px 60px rgba(28, 31, 74, 0.25);
  animation: x-ae-rise 320ms var(--ease-out) both;
}
.x-bp-dots { display: flex; gap: 6px; }
.x-bp-dots i { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--c) 60%); }
.x-bp-dialog h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--bp-ink); margin: 0; }
.x-bp-dialog p { font-size: 16px; color: var(--bp-ink-2); margin: 0; }
.x-bp-dialog p b { color: #00a344; font-weight: 600; }
.x-bp-btn {
  appearance: none; border: 0; cursor: pointer; margin-top: 8px; min-height: 52px; width: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, #2f80ff, #9b5de5, #ff4fd8); color: #ffffff; font-size: 16px; font-weight: 600;
  box-shadow: 0 8px 20px rgba(155, 93, 229, 0.35); transition: transform var(--dur-quick) var(--ease-out);
}
.x-bp-btn:active { transform: scale(0.97); }
.x-bp-btn:focus-visible { outline: 3px solid #c9b3f5; outline-offset: 3px; }
/* logo */
.x-logo {
  width: 46px; height: 46px; flex: none; border-radius: 50%; object-fit: cover; background: #000;
  box-shadow: 0 0 0 1px rgba(255, 196, 64, 0.45), 0 0 14px rgba(255, 196, 64, 0.35);
}
.x-splash {
  position: fixed; inset: 0; z-index: 1000; background: var(--x-bg);
  display: flex; align-items: center; justify-content: center;
  animation: x-splash-out 0.5s var(--ease-out) 1.5s forwards;
}
.x-splash img {
  width: 160px; height: 160px; border-radius: 50%; object-fit: cover; background: #000;
  box-shadow: 0 0 0 1px rgba(255, 196, 64, 0.4), 0 0 48px rgba(255, 196, 64, 0.4);
  animation: x-splash-in 0.6s var(--ease-out) both;
}
@keyframes x-splash-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes x-splash-out { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) {
  .x-splash img { animation: none; }
  .x-splash { animation-duration: 0.01s; }
}
/* referral */
:root { --x-gold: #ffc440; --x-gold-soft: rgba(255, 196, 64, 0.12); --x-gold-line: rgba(255, 196, 64, 0.4); --x-gold-glow: 0 0 22px rgba(255, 196, 64, 0.45); }
.x-promo {
  appearance: none; cursor: pointer; width: 100%; text-align: left; color: #fff; touch-action: manipulation;
  display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 14px 16px;
  border-radius: var(--r-l); border: 1px solid var(--x-gold-line);
  background: linear-gradient(135deg, rgba(255, 196, 64, 0.16), var(--x-card) 60%);
  box-shadow: 0 0 18px rgba(255, 196, 64, 0.14);
  transition: transform var(--dur-quick) var(--ease-out);
}
.x-promo:active { transform: scale(0.98); }
.x-promo__ico { width: 48px; height: 48px; border-radius: var(--r-s); display: grid; place-items: center; background: var(--x-gold-soft); color: var(--x-gold); }
.x-promo__ico svg { width: 26px; height: 26px; filter: drop-shadow(0 0 6px rgba(255, 196, 64, 0.6)); }
.x-promo h3 { font-size: 16px; font-weight: 600; }
.x-promo p { font-size: 13px; color: var(--x-dim); margin-top: 2px; }
.x-promo__go { color: var(--x-gold); font-weight: 600; font-size: 14px; white-space: nowrap; }
.x-gold { color: var(--x-gold); text-shadow: var(--x-gold-glow); }
.x-inv-hero { border-color: var(--x-gold-line); background: radial-gradient(circle at 85% 0%, rgba(255, 196, 64, 0.18), transparent 60%), var(--x-card); }
.x-inv-hero .x-h1 { margin: 0; line-height: 1.2; }
.x-btn--gold { background: var(--x-gold); color: #1a1200; box-shadow: var(--x-gold-glow); }
.x-btn--goldghost { background: transparent; color: var(--x-gold); border: 1px solid var(--x-gold-line); box-shadow: none; }
.x-code { display: flex; align-items: center; gap: 10px; }
.x-code__val {
  flex: 1; min-height: 50px; display: flex; align-items: center; padding: 0 16px; border-radius: var(--r-m);
  border: 1px dashed var(--x-gold-line); background: #2a2210; color: var(--x-gold);
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 20px; letter-spacing: 0.08em;
}
.x-link {
  flex: 1; min-width: 0; min-height: var(--tap); display: flex; align-items: center; padding: 0 12px; border-radius: var(--r-s);
  background: var(--x-card-2); border: 1px solid var(--x-line); color: var(--x-dim); font-size: 13px;
  font-family: "Geist Mono", ui-monospace, monospace; overflow-wrap: anywhere; word-break: break-all; padding-block: 8px; line-height: 1.4;
}
.x-share { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.x-share a {
  min-height: var(--tap); display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--r-s);
  background: var(--x-card-2); border: 1px solid var(--x-line); color: #fff; font-size: 14px; font-weight: 500; text-decoration: none;
}
.x-share a:active { border-color: var(--x-gold-line); }
.x-share svg { width: 18px; height: 18px; }
.x-refstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.x-refstats div { min-width: 0; padding: 12px 10px; border-radius: var(--r-s); background: var(--x-card-2); border: 1px solid var(--x-line); text-align: center; }
.x-refstats dt { font-size: 12px; color: var(--x-dim); }
.x-refstats dd { margin: 4px 0 0; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.x-st--gold { background: var(--x-gold-soft); color: var(--x-gold); border: 1px solid var(--x-gold-line); }
.x-fr { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.x-fr li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-top: 1px solid var(--x-line); font-size: 14px; }
.x-fr li:first-child { border-top: 0; }
.x-fr small { display: block; color: var(--x-dim); font-size: 12px; }
.x-st { flex: none; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.x-st--wait { background: var(--x-card-2); color: var(--x-dim); border: 1px solid var(--x-line); }
.x-st--done { background: #0a2a1a; color: var(--x-green); border: 1px solid rgba(0, 230, 118, 0.4); }
.x-rules { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--x-dim); font-size: 14px; line-height: 1.45; }
.x-rules li::marker { color: var(--x-gold); }


/* ===== production additions ===== */
.x-hidden { display: none !important; }
.x-avatar {
  appearance: none; cursor: pointer; width: var(--tap); height: var(--tap); flex: none; border-radius: 50%;
  border: 1px solid rgba(0, 230, 118, 0.35); background: var(--x-card); color: var(--x-green);
  font: 600 16px/1 var(--sans); display: grid; place-items: center; text-transform: uppercase;
}
.x-top__right { display: flex; align-items: center; gap: 8px; }
/* auth */
.x-auth { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 24px 0 40px; }
.x-auth[hidden] { display: none; }
.x-auth__logo { width: 112px; height: 112px; border-radius: 50%; margin: 0 auto; object-fit: cover; background: #000;
  box-shadow: 0 0 0 1px rgba(255, 196, 64, 0.4), 0 0 36px rgba(255, 196, 64, 0.35); }
.x-auth h1 { text-align: center; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.x-auth h1 b { color: var(--x-green); text-shadow: var(--x-glow); }
.x-auth__sub { text-align: center; color: var(--x-dim); font-size: 14px; }
.x-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--x-card-2); border-radius: var(--r-pill); }
.x-seg button { appearance: none; border: 0; min-height: 40px; border-radius: var(--r-pill); background: none; color: var(--x-dim); font-weight: 600; font-size: 14px; cursor: pointer; }
.x-seg button[aria-selected="true"] { background: var(--x-green); color: #03140a; }
.x-or { display: flex; align-items: center; gap: 10px; color: var(--x-dim); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.x-or::before, .x-or::after { content: ""; flex: 1; height: 1px; background: var(--x-line); }
.x-google { background: #fff; color: #1f1f1f; box-shadow: none; }
.x-google svg { width: 20px; height: 20px; }
.x-linkbtn { appearance: none; background: none; border: 0; color: var(--x-green); font-size: 14px; cursor: pointer; padding: 6px 0; text-decoration: underline; text-underline-offset: 3px; }
.x-msg { font-size: 14px; line-height: 1.45; padding: 10px 12px; border-radius: var(--r-s); background: rgba(0, 230, 118, 0.1); border: 1px solid rgba(0, 230, 118, 0.35); color: #b9ffd9; }
.x-msg.is-err { background: rgba(255, 92, 108, 0.1); border-color: rgba(255, 92, 108, 0.4); color: #ffc2c8; }
.x-msg[hidden] { display: none; }
.x-legal { text-align: center; font-size: 12px; color: var(--x-dim); line-height: 1.5; }
.x-legal a { color: var(--x-dim); }
/* profile sheet */
.x-prof { display: flex; flex-direction: column; gap: 10px; }
.x-prof dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 14px; }
.x-prof dt { color: var(--x-dim); }
.x-prof dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.x-btn--danger { background: transparent; color: var(--x-red); border: 1px solid rgba(255, 92, 108, 0.45); box-shadow: none; }
/* withdrawal statuses */
.x-status--paid { color: var(--x-green); background: #0a2a1a; }
.x-status--rejected { color: var(--x-red); background: rgba(255, 92, 108, 0.12); }
.x-hist a { color: var(--x-green); }
/* boot / setup */
.x-boot { min-height: 60dvh; display: grid; place-items: center; color: var(--x-dim); font-size: 14px; }
.x-setup { margin: 24px 0; }
.x-setup code { font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; color: var(--x-green); }
.x-btn.is-loading { opacity: 0.7; pointer-events: none; }
.x-footer { display: flex; justify-content: center; gap: 16px; font-size: 12px; color: var(--x-dim); padding: 8px 0 4px; }
.x-footer a { color: var(--x-dim); }

/* Offers (ayeT offerwall) */
.x-offers-card .x-btn { flex: none; }
.x-offers { width: min(100%, 720px); height: min(92dvh, 900px); }
.x-offers iframe { flex: 1 1 auto; width: 100%; min-height: 360px; border: 0; border-radius: var(--r-s); background: #fff; }