/* GÀ VÀNG - support, guide, intro, loading refresh */
:root{
  --gvx-bg-1:#083b2a;
  --gvx-bg-2:#0f5d3b;
  --gvx-gold-1:#ffd972;
  --gvx-gold-2:#e6a94d;
  --gvx-wood-1:#845026;
  --gvx-wood-2:#5c3214;
  --gvx-cream:#fff8df;
  --gvx-green-soft:#d9f2b8;
}

/* Better loading screen */
.auth-mask{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at 15% 18%, rgba(255,229,136,.24), transparent 18%),
    radial-gradient(circle at 83% 25%, rgba(123,206,131,.20), transparent 20%),
    linear-gradient(180deg, #0b4a34 0%, #083323 100%);
}
.auth-panel{
  width:min(92vw, 430px);
  padding:28px 24px 26px;
  border-radius:34px;
  text-align:center;
  color:var(--gvx-cream);
  background:
    linear-gradient(180deg, rgba(255,248,223,.10), rgba(255,248,223,.04)),
    linear-gradient(180deg, rgba(31,94,61,.96), rgba(13,53,35,.98));
  border:1px solid rgba(255,217,114,.26);
  box-shadow:0 24px 50px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
}
.auth-panel::before{
  content:"";
  display:block;
  width:100%; height:160px; margin:0 auto 18px;
  border-radius:24px;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,241,182,.55), transparent 20%),
    radial-gradient(circle at 86% 28%, rgba(184,244,140,.26), transparent 20%),
    linear-gradient(180deg, rgba(17,77,55,.45), rgba(10,54,38,.65)),
    linear-gradient(145deg, #5fa85f, #386f42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.auth-chick{
  display:grid; place-items:center;
  width:94px; height:94px; margin:-120px auto 14px;
  border-radius:50%;
  background:linear-gradient(180deg, #ffd975, #e9a847);
  box-shadow:0 12px 24px rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.3);
  font-size:44px;
  animation:gvxFloat 2.8s ease-in-out infinite;
}
.auth-panel h2{
  margin:6px 0 10px; font-size:30px; line-height:1.05; font-weight:900; color:#fff5cf;
}
.auth-panel p{
  margin:0 auto 14px; max-width:300px; color:#e8f3d9; font-weight:700; line-height:1.55;
}
.auth-panel::after{
  content:"";
  display:block; width:78%; height:16px; margin:18px auto 0;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,220,120,.3), rgba(255,220,120,.08));
  box-shadow:inset 0 0 0 1px rgba(255,214,109,.35);
}
.auth-progress{
  width:78%; height:12px; margin:-14px auto 14px; border-radius:999px;
  overflow:hidden; background:rgba(255,232,160,.18); position:relative;
  box-shadow:inset 0 0 0 1px rgba(255,214,109,.35);
}
.auth-progress > i{
  display:block; height:100%; width:40%; border-radius:999px;
  background:repeating-linear-gradient(135deg, #ffd65c 0 12px, #efb54b 12px 24px);
  animation:gvxProgress 1.8s ease-in-out infinite;
}
.auth-loading-note{
  display:inline-flex; align-items:center; gap:8px; margin-top:2px;
  padding:8px 14px; border-radius:999px; font-size:13px; font-weight:800;
  color:#b0632c; background:rgba(255,245,225,.92);
}
.preview-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  padding:10px 14px; border-radius:999px; text-decoration:none;
  color:#102f23; background:#ffe6a6; font-weight:900;
}
.preview-link:hover{filter:brightness(1.02)}

/* overlay pages */
.gv-info-overlay{
  position:fixed; inset:0; z-index:9998; display:none;
  background:rgba(5,25,17,.78); backdrop-filter:blur(6px);
}
.gv-info-overlay.active{display:block}
.gv-info-sheet{
  position:absolute; inset:0 auto 0 0; width:100%; height:100%; overflow:auto;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,223,112,.14), transparent 18%),
    radial-gradient(circle at 88% 16%, rgba(136,212,113,.12), transparent 18%),
    linear-gradient(180deg, #0d472f 0%, #0a3826 100%);
  color:#fff8de;
}
.gv-info-sheet-inner{
  min-height:100%; padding:18px 16px 22px;
}
.gv-info-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px;
}
.gv-info-back{
  appearance:none; border:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 16px; border-radius:999px; font-weight:900; font-size:14px;
  color:#4f2e0f; background:linear-gradient(180deg,#ffd975,#eeb85d);
  box-shadow:0 8px 18px rgba(0,0,0,.16);
}
.gv-info-badge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:rgba(255,255,255,.08); color:#eaf8d9; font-size:12px; font-weight:800;
  border:1px solid rgba(255,220,120,.18);
}
.gv-hero-card{
  position:relative; overflow:hidden; border-radius:28px; padding:20px 18px; margin-bottom:16px;
  border:1px solid rgba(255,215,117,.28);
  background:
    linear-gradient(180deg, rgba(255,245,210,.10), rgba(255,245,210,.04)),
    linear-gradient(145deg, rgba(28,98,61,.98), rgba(15,59,38,.98));
  box-shadow:0 18px 34px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.10);
}
.gv-hero-card::after{
  content:""; position:absolute; right:-24px; top:-30px; width:160px; height:160px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,218,119,.18), transparent 70%);
}
.gv-hero-card h2{margin:0 0 8px; font-size:32px; line-height:1.05; font-weight:900; color:#fff2c5}
.gv-hero-card p{margin:0; color:#e6f3db; line-height:1.65; font-weight:700}
.gv-hero-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:16px}
.gv-stat-pill{
  border-radius:18px; padding:12px 10px; text-align:center;
  background:rgba(7,40,26,.28); border:1px solid rgba(255,230,147,.14);
}
.gv-stat-pill strong{display:block; font-size:20px; color:#fff3c1}
.gv-stat-pill span{font-size:12px; color:#cfe5bf; font-weight:700}
.gv-section-card{
  border-radius:24px; padding:16px; margin-bottom:14px;
  background:linear-gradient(180deg, rgba(22,82,53,.98), rgba(13,59,38,.98));
  border:1px solid rgba(255,214,108,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.gv-section-card h3{margin:0 0 12px; font-size:22px; color:#fff2c8}
.gv-guide-steps{display:grid; gap:12px}
.gv-guide-step{
  display:grid; grid-template-columns:56px minmax(0,1fr); gap:12px; align-items:flex-start;
  padding:12px; border-radius:18px; background:rgba(255,255,255,.05);
}
.gv-guide-step .num{
  width:56px; height:56px; border-radius:18px; display:grid; place-items:center;
  font-size:24px; font-weight:900; color:#5d3414;
  background:linear-gradient(180deg,#ffe48d,#efb653);
}
.gv-guide-step strong{display:block; margin-bottom:4px; color:#fff7d7; font-size:16px}
.gv-guide-step p{margin:0; color:#d9ead0; line-height:1.55; font-size:14px}
.gv-feature-grid{display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr));}
.gv-feature-card{
  min-height:132px; border-radius:22px; padding:16px;
  background:
    radial-gradient(circle at top right, rgba(255,217,114,.16), transparent 28%),
    linear-gradient(180deg, rgba(29,95,60,.98), rgba(15,60,39,.98));
  border:1px solid rgba(255,214,108,.18);
}
.gv-feature-card .icon{font-size:28px; margin-bottom:10px}
.gv-feature-card strong{display:block; font-size:16px; color:#fff7d8; margin-bottom:6px}
.gv-feature-card p{margin:0; color:#d7eacb; font-size:13px; line-height:1.55}
.gv-highlight-banner{
  display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:22px;
  background:linear-gradient(90deg, rgba(255,220,120,.18), rgba(255,220,120,.07));
  border:1px solid rgba(255,214,108,.22);
}
.gv-highlight-banner .icon{font-size:28px}
.gv-highlight-banner strong{display:block; color:#fff4cc; font-size:16px; margin-bottom:3px}
.gv-highlight-banner span{color:#d9ebcf; font-size:13px; line-height:1.5}
.gv-poster-stack{display:grid; gap:12px; margin-top:12px}
.gv-poster-card{
  min-height:150px; border-radius:24px; overflow:hidden; position:relative; padding:18px;
  border:1px solid rgba(255,216,111,.2);
  box-shadow:0 16px 28px rgba(0,0,0,.16);
}
.gv-poster-card.farm{
  background:
    linear-gradient(180deg, rgba(255,248,220,.06), rgba(255,248,220,.02)),
    linear-gradient(140deg, #5ca55d 0%, #2f6e42 45%, #154b31 100%);
}
.gv-poster-card.money{
  background:
    linear-gradient(180deg, rgba(255,240,195,.08), rgba(255,240,195,.03)),
    linear-gradient(140deg, #8a5b1f 0%, #5f3f1b 35%, #194c34 100%);
}
.gv-poster-card.team{
  background:
    linear-gradient(180deg, rgba(255,251,228,.08), rgba(255,251,228,.03)),
    linear-gradient(140deg, #2b7b56 0%, #174632 45%, #113628 100%);
}
.gv-poster-card .poster-emoji{font-size:44px; margin-bottom:10px}
.gv-poster-card strong{display:block; font-size:24px; margin-bottom:8px; color:#fff5cf}
.gv-poster-card p{margin:0; color:#ebf5df; max-width:88%; line-height:1.6; font-weight:700}
.gv-poster-card .tag{
  position:absolute; top:14px; right:14px; padding:7px 10px; border-radius:999px;
  font-size:11px; font-weight:900; color:#593816; background:#ffe08d;
}
@keyframes gvxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes gvxProgress{0%{transform:translateX(-70%)}50%{transform:translateX(90%)}100%{transform:translateX(230%)}}
@media (max-width:420px){
  .auth-panel{padding:24px 18px 22px;border-radius:28px}
  .auth-panel h2{font-size:26px}
  .gv-hero-card h2{font-size:28px}
  .gv-hero-stats{grid-template-columns:1fr 1fr}
  .gv-feature-grid{grid-template-columns:1fr}
  .gv-guide-step{grid-template-columns:48px minmax(0,1fr)}
  .gv-guide-step .num{width:48px;height:48px;border-radius:16px;font-size:22px}
}

/* GV_INFO_BACK_FIX_V2 */
.gv-info-overlay .gv-info-exit-fab {
  position: fixed;
  z-index: 10002;
  right: 16px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  border: 1px solid #ffe3a5;
  border-radius: 999px;
  min-height: 48px;
  padding: 11px 20px;
  color: #54320f;
  background: linear-gradient(180deg, #ffe38e, #e8ac4a);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  font-family: inherit; font-size:14px; font-weight:900; line-height:1.3;
  cursor: pointer;
}
.gv-info-overlay .gv-info-sheet-inner { padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px)); }
.gv-info-overlay .gv-info-back { cursor: pointer; touch-action: manipulation; }

/* GV_INFO_NAV_COMPACT_V3: Single top back button; no floating footer button. */
.gv-info-overlay,
.gv-info-overlay.active {
  z-index: 2147483000 !important;
}
.gv-info-overlay .gv-info-exit-fab,
.gv-info-overlay #gvInfoExitToHome {
  display: none !important;
}
.gv-info-overlay .gv-info-sheet {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  height: 100dvh !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.gv-info-overlay .gv-info-sheet-inner {
  padding: 0 16px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
}
.gv-info-overlay .gv-info-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 15 !important;
  min-height: 60px;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px;
  margin: 0 -16px 14px !important;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px !important;
  background: rgba(10, 55, 37, 0.97) !important;
  border-bottom: 1px solid rgba(241, 208, 135, .23) !important;
  box-shadow: 0 8px 17px rgba(2, 21, 12, .2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.gv-info-overlay .gv-info-back,
.gv-info-overlay #gvInfoBackBtn {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 38px !important;
  padding: 8px 12px !important;
  border-radius: 11px !important;
  border: 1px solid rgba(255, 218, 147, .55) !important;
  color: #fff1c8 !important;
  background: linear-gradient(180deg, #79502e, #603a23) !important;
  font-family: inherit;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}
.gv-info-overlay .gv-info-back:focus-visible {
  outline: 2px solid #ffde95;
  outline-offset: 2px;
}
.gv-info-overlay .gv-info-badge {
  min-width: 0;
  max-width: 52%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px !important;
  padding: 8px 10px !important;
}
@media (max-width: 360px) {
  .gv-info-overlay .gv-info-topbar {padding-left: 12px !important; padding-right: 12px !important;}
  .gv-info-overlay .gv-info-badge {max-width: 47%;}
}