/* TU TIEN LO - Official Xianxia Landing & Portal CSS */
@import url('https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400&family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');

:root {
  --gold-primary: #d4af37;
  --gold-light: #fce07f;
  --gold-bright: #ffd700;
  --bg-dark: #080612;
  --card-bg: rgba(18, 13, 36, 0.9);
  --border-gold: rgba(212, 175, 55, 0.4);
}

#ttl-landing-root {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: var(--bg-dark);
  color: #e2e8f0;
  font-family: 'Be Vietnam Pro', sans-serif;
  z-index: 10000;
  transition: opacity 0.5s ease;
  scroll-behavior: smooth;
}

#ttl-landing-root::-webkit-scrollbar {
  width: 8px;
}
#ttl-landing-root::-webkit-scrollbar-track {
  background: #080612;
}
#ttl-landing-root::-webkit-scrollbar-thumb {
  background: #241a3d;
  border-radius: 4px;
}

.font-philosopher {
  font-family: 'Philosopher', serif !important;
}

/* BACKGROUND ATMOSPHERE */
.ttl-bg-glow {
  position: absolute;
  top: -150px;
  left: 50%;
  transform: translateX(-50%);
  width: 850px;
  height: 850px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, rgba(88, 101, 242, 0.08) 45%, transparent 70%);
  pointer-events: none;
  filter: blur(60px);
}

.ttl-stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(2px 2px at 20px 30px, #ffffff, rgba(0,0,0,0)),
                    radial-gradient(2px 2px at 40px 70px, #ffd700, rgba(0,0,0,0)),
                    radial-gradient(1px 1px at 90px 40px, #5865F2, rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: 0.3;
  pointer-events: none;
}

/* FLOATING QUICK DOCK (DISCORD & TIKTOK ONLY) */
.ttl-floating-dock {
  position: fixed;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ttl-dock-item {
  width: 58px;
  height: 64px;
  border-radius: 14px;
  background: rgba(20, 14, 38, 0.95);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}

.ttl-dock-discord {
  border: 1px solid rgba(88, 101, 242, 0.6);
  color: #5865F2;
}
.ttl-dock-discord span {
  font-size: 9px;
  font-weight: 800;
  color: #a2b2ff;
  margin-top: 4px;
}
.ttl-dock-discord:hover {
  background: #20173b;
  transform: scale(1.08);
  box-shadow: 0 0 20px rgba(88, 101, 242, 0.5);
}

.ttl-dock-tiktok {
  border: 1px solid rgba(37, 244, 238, 0.6);
  color: #25F4EE;
}
.ttl-dock-tiktok span {
  font-size: 9px;
  font-weight: 800;
  color: #a5f3fc;
  margin-top: 4px;
}
.ttl-dock-tiktok:hover {
  background: #20173b;
  transform: scale(1.08);
  box-shadow: 0 0 20px rgba(37, 244, 238, 0.5);
}

/* STICKY HEADER */
.ttl-nav-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 8, 20, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.4);
  padding: 10px 0;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.9);
}

.ttl-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ttl-nav-logo {
  height: 48px;
  filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.6));
  mix-blend-mode: screen;
}

.ttl-nav-links {
  display: flex;
  gap: 28px;
}

.ttl-nav-link {
  color: rgba(254, 240, 138, 0.8);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.25s ease;
}

.ttl-nav-link:hover, .ttl-nav-link.active {
  color: #fce07f;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.7);
}

.ttl-nav-link.text-pink {
  color: #fbcfe8;
}
.ttl-nav-link.text-pink:hover {
  color: #f472b6;
}

/* BUTTONS */
.gold-bevel-btn {
  background: linear-gradient(180deg, #fce07f 0%, #d4af37 60%, #8c6d1f 100%);
  border: 1px solid #fff4b8;
  border-radius: 10px;
  color: #000;
  font-family: 'Philosopher', serif;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(212, 175, 55, 0.4);
  padding: 10px 24px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.gold-bevel-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 24px rgba(212, 175, 55, 0.6);
}

.ttl-btn-large {
  padding: 14px 38px;
  font-size: 17px;
  border-radius: 12px;
}

/* HERO SECTION */
.ttl-hero {
  padding: 70px 20px 60px 20px;
  text-align: center;
  position: relative;
  z-index: 10;
}

.ttl-hero-content {
  max-width: 900px;
  margin: 0 auto;
}

.ttl-logo-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
}

.ttl-hero-logo {
  max-width: 600px;
  width: 100%;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.7));
}

.vertical-seal {
  writing-mode: vertical-rl;
  border: 1px solid rgba(248, 113, 113, 0.8);
  color: #fca5a5;
  background: rgba(153, 27, 27, 0.4);
  padding: 12px 6px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Philosopher', serif;
  letter-spacing: 3px;
  text-transform: uppercase;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
}

.ttl-hero-slogan {
  font-family: 'Philosopher', serif;
  font-size: 28px;
  font-weight: 700;
  color: #fce07f;
  letter-spacing: 3px;
  margin: 12px 0;
  text-shadow: 0 2px 10px rgba(212, 175, 55, 0.7);
}

.ttl-hero-sub {
  font-size: 15px;
  color: rgba(254, 240, 138, 0.9);
  max-width: 650px;
  margin: 0 auto 30px auto;
  line-height: 1.6;
}

.ttl-hero-btn-wrap {
  display: flex;
  justify-content: center;
}

/* SECTIONS */
.ttl-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
  position: relative;
  z-index: 10;
}

.ttl-sec-header {
  text-align: center;
  margin-bottom: 40px;
}

.ttl-sec-tag {
  font-size: 13px;
  color: #fbbf24;
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.ttl-sec-tag.text-pink { color: #f472b6; }

.ttl-sec-title {
  font-size: 32px;
  font-weight: 700;
  color: #fef08a;
  text-transform: uppercase;
  margin: 0;
}
.ttl-sec-title.text-pink { color: #fbcfe8; }

.ttl-sec-desc {
  font-size: 13px;
  color: rgba(254, 240, 138, 0.7);
  max-width: 600px;
  margin: 8px auto 0 auto;
}

/* FEATURE HIGHLIGHTS (5 COLUMNS GRID) */
.ttl-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.ttl-feat-item {
  background: rgba(18, 13, 36, 0.9);
  border: 2px solid rgba(212, 175, 55, 0.3);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

.ttl-feat-item:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: #fce07f;
}

.ttl-feat-img-box {
  position: relative;
  height: 220px;
  background: #120d24;
  overflow: hidden;
}

.ttl-feat-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.5s ease;
}

.ttl-feat-item:hover .ttl-feat-img-box img {
  transform: scale(1.1);
}

.ttl-feat-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 14px;
}

.ttl-feat-info {
  padding: 14px 12px;
  text-align: center;
}

.ttl-feat-info h3 {
  font-family: 'Philosopher', serif;
  font-size: 15px;
  font-weight: 700;
  color: #fde047;
  margin: 0 0 6px 0;
}

.ttl-feat-info p {
  font-size: 12px;
  color: rgba(254, 240, 138, 0.7);
  margin: 0;
  line-height: 1.4;
}

/* HỒNG NHAN TIÊN TỬ (4 COLUMNS GRID) */
.ttl-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.ttl-hn-card {
  background: rgba(27, 18, 46, 0.85);
  border: 1px solid rgba(244, 114, 182, 0.3);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.ttl-hn-card:hover {
  transform: translateY(-6px);
  border-color: #f472b6;
  box-shadow: 0 10px 25px rgba(244, 114, 182, 0.25);
}

.ttl-hn-img {
  height: 200px;
  overflow: hidden;
  background: radial-gradient(circle, rgba(244, 114, 182, 0.2) 0%, rgba(27, 18, 46, 0.9) 80%);
}

.ttl-hn-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.5s ease;
}

.ttl-hn-card:hover .ttl-hn-img img {
  transform: scale(1.1);
}

.ttl-hn-body {
  padding: 14px;
  text-align: center;
}

.ttl-hn-role {
  font-size: 10px;
  color: #f472b6;
  font-family: monospace;
  display: block;
}

.ttl-hn-body h4 {
  font-family: 'Philosopher', serif;
  font-size: 16px;
  font-weight: 800;
  color: #fbcfe8;
  margin: 4px 0 8px 0;
}

.ttl-hn-bonus {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(244, 114, 182, 0.2);
  border: 1px solid rgba(244, 114, 182, 0.4);
  border-radius: 6px;
  font-size: 10px;
  color: #fbcfe8;
  font-family: monospace;
}

/* COMMUNITY CARDS (3 COLUMNS GRID) */
.ttl-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.ttl-comm-card {
  background: rgba(19, 15, 38, 0.9);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}

.ttl-c-discord {
  border: 1px solid rgba(88, 101, 242, 0.4);
}
.ttl-c-discord:hover {
  border-color: #5865F2;
  box-shadow: 0 0 25px rgba(88, 101, 242, 0.3);
}

.ttl-c-tiktok {
  border: 1px solid rgba(37, 244, 238, 0.4);
}
.ttl-c-tiktok:hover {
  border-color: #25F4EE;
  box-shadow: 0 0 25px rgba(37, 244, 238, 0.3);
}

.ttl-c-gift {
  border: 1px solid rgba(212, 175, 55, 0.4);
}
.ttl-c-gift:hover {
  border-color: #ffd700;
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.3);
}

.ttl-comm-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.ttl-comm-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.ttl-c-discord .ttl-comm-icon { background: rgba(88, 101, 242, 0.2); color: #5865F2; border: 1px solid rgba(88, 101, 242, 0.5); }
.ttl-c-tiktok .ttl-comm-icon { background: rgba(37, 244, 238, 0.2); color: #25F4EE; border: 1px solid rgba(37, 244, 238, 0.5); }
.ttl-c-gift .ttl-comm-icon { background: rgba(212, 175, 55, 0.2); color: #ffd700; border: 1px solid rgba(212, 175, 55, 0.5); }

.ttl-online-badge {
  font-size: 10px;
  font-weight: 700;
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #86efac;
  padding: 3px 10px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ttl-online-badge .dot {
  width: 6px;
  height: 6px;
  background: #22c55e;
  border-radius: 50%;
}

.ttl-tag-badge {
  font-size: 10px;
  font-weight: 700;
  background: rgba(212, 175, 55, 0.2);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #fef08a;
  padding: 3px 10px;
  border-radius: 12px;
}

.ttl-comm-card h3 {
  font-family: 'Philosopher', serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px 0;
}

.ttl-comm-card p {
  font-size: 12px;
  color: rgba(254, 240, 138, 0.7);
  line-height: 1.5;
  margin: 0 0 16px 0;
}

.ttl-comm-btn {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  text-decoration: none;
  font-family: 'Philosopher', serif;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-discord { background: #5865F2; color: #fff; }
.btn-discord:hover { background: #4752c4; }

.btn-tiktok { background: linear-gradient(90deg, #00f2fe 0%, #4facfe 100%); color: #000; }
.btn-tiktok:hover { opacity: 0.9; }

.btn-gold { background: linear-gradient(180deg, #fce07f 0%, #d4af37 100%); color: #000; }
.btn-gold:hover { opacity: 0.9; }

/* CODE BOX */
.ttl-code-row {
  background: rgba(0, 0, 0, 0.6);
  border: 1px dashed rgba(212, 175, 55, 0.5);
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

#ttl-code-val {
  font-family: monospace;
  font-size: 14px;
  font-weight: 800;
  color: #fde047;
  letter-spacing: 2px;
}

.ttl-copy-sm {
  background: rgba(212, 175, 55, 0.25);
  border: 1px solid #d4af37;
  color: #fef08a;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.ttl-copy-sm:hover { background: #d4af37; color: #000; }

.ttl-code-sub {
  font-size: 10px !important;
  color: rgba(254, 240, 138, 0.6) !important;
  margin-bottom: 12px !important;
}

/* FOOTER */
.ttl-footer {
  background: #040308;
  border-top: 1px solid rgba(212, 175, 55, 0.15);
  padding: 30px 20px;
  text-align: center;
}

.ttl-footer-logo {
  height: 44px;
  margin-bottom: 12px;
  mix-blend-mode: screen;
}

.ttl-footer-nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 12px;
}

.ttl-footer-nav a {
  color: rgba(254, 240, 138, 0.7);
  text-decoration: none;
  font-size: 12px;
  text-transform: uppercase;
}
.ttl-footer-nav a:hover { color: #fce07f; }

.ttl-footer p {
  font-size: 11px;
  color: rgba(254, 240, 138, 0.4);
  margin: 0;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .ttl-grid-5 { grid-template-columns: repeat(3, 1fr); }
  .ttl-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .ttl-nav-links { display: none; }
  .ttl-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .ttl-grid-3 { grid-template-columns: 1fr; }
  .ttl-hero-logo { max-width: 320px; }
  .vertical-seal { writing-mode: horizontal-tb; letter-spacing: 2px; }
}
/* Login alignment */
#ttl-login-overlay .ttl-label { text-align: left; display: block; }
#ttl-login-overlay .ttl-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#ttl-login-overlay .ttl-tab-btn { white-space: nowrap; overflow: hidden; text-overflow: clip; font-size: 12px; letter-spacing: 0; padding-inline: 2px; }

/* 2026-09-25 Home redesign: polished landing layout */
#ttl-landing-root {
  background:
    radial-gradient(circle at 50% -10%, rgba(93, 72, 180, .24), transparent 38%),
    radial-gradient(circle at 85% 42%, rgba(42, 95, 145, .12), transparent 30%),
    linear-gradient(180deg, #0b0919 0%, #080612 58%, #05040d 100%);
}
#ttl-landing-root::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(120deg, rgba(255,255,255,.025), transparent 25%, rgba(212,175,55,.03) 62%, transparent 85%);
}
.ttl-nav-header {
  background: linear-gradient(180deg, rgba(8,7,19,.97), rgba(8,7,19,.76));
  border-bottom-color: rgba(212,175,55,.3);
  box-shadow: 0 10px 34px rgba(0,0,0,.38);
}
.ttl-nav-inner { max-width: 1120px; min-height: 58px; }
.ttl-nav-logo { height: 42px; }
.ttl-nav-links { gap: 22px; }
.ttl-nav-link { font-size: 12px; letter-spacing: .08em; }
.ttl-floating-dock { left: 16px; right: auto; gap: 8px; }
.ttl-dock-item {
  width: 52px;
  height: 56px;
  border-radius: 14px;
  background: rgba(17,12,34,.86);
  border-color: rgba(212,175,55,.22);
}
.ttl-hero {
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px 20px 88px;
}
.ttl-hero::after {
  content: "";
  position: absolute;
  width: min(720px, 90vw);
  height: 260px;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(88,101,242,.16), transparent 68%);
  filter: blur(16px);
  pointer-events: none;
}
.ttl-hero-logo-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.ttl-hero-logo {
  width: min(560px, 82vw);
  max-width: 560px;
  filter: drop-shadow(0 0 26px rgba(212,175,55,.58));
}
.vertical-seal {
  writing-mode: horizontal-tb;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 11px;
  letter-spacing: 2px;
  background: linear-gradient(90deg, rgba(127,29,29,.85), rgba(190,38,38,.52), rgba(127,29,29,.85));
}
.ttl-slogan {
  position: relative;
  z-index: 1;
  font-size: clamp(19px, 3.1vw, 30px);
  letter-spacing: clamp(1px, .28vw, 4px);
  margin: 18px 0 10px;
  color: #fce7a2;
  text-shadow: 0 3px 18px rgba(212,175,55,.34);
}
.ttl-hero-desc {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto 28px;
  line-height: 1.7;
  color: rgba(241,235,255,.78);
  font-size: 14px;
}
.ttl-hero > div:last-child { position: relative; z-index: 1; }
.gold-bevel-btn {
  border-radius: 12px;
  box-shadow: 0 8px 26px rgba(212,175,55,.22), inset 0 1px rgba(255,255,255,.45);
}
.ttl-section { max-width: 1180px; margin: 0 auto; padding: 78px 24px; }
.ttl-sec-header { margin-bottom: 28px; }
.ttl-sec-subtitle { color: rgba(252,224,127,.72); font-size: 11px; letter-spacing: .18em; }
.ttl-sec-title {
  margin-top: 10px;
  color: #f6e8ad;
  font-size: clamp(23px, 3.2vw, 38px);
  line-height: 1.2;
  text-wrap: balance;
}
.ttl-feat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.ttl-feat-card {
  min-height: 184px;
  padding: 22px 15px 18px;
  text-align: center;
  background: linear-gradient(180deg, rgba(31,22,58,.92), rgba(15,11,31,.96));
  border: 1px solid rgba(212,175,55,.25);
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.04);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.ttl-feat-card:hover {
  transform: translateY(-6px);
  border-color: rgba(252,224,127,.62);
  box-shadow: 0 18px 34px rgba(0,0,0,.34), 0 0 22px rgba(212,175,55,.14);
}
.ttl-feat-icon { font-size: 32px; line-height: 1; margin-bottom: 14px; }
.ttl-feat-title {
  color: #fce7a2;
  font-family: 'Philosopher', serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  margin-bottom: 9px;
}
.ttl-feat-desc { color: rgba(226,232,240,.68); font-size: 12px; line-height: 1.55; }
.ttl-hn-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ttl-hn-card {
  min-height: 154px;
  padding: 22px 14px 16px;
  text-align: center;
  background: linear-gradient(180deg, rgba(43,21,61,.92), rgba(20,12,34,.96));
  border: 1px solid rgba(244,114,182,.26);
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
}
.ttl-hn-card:hover { transform: translateY(-5px); border-color: rgba(251,207,232,.65); }
.ttl-hn-role { color: rgba(249,168,212,.74); font-size: 11px; margin-bottom: 3px; }
.ttl-hn-name { color: #fce7f3; font-size: 18px; line-height: 1.2; margin-bottom: 10px; }
.ttl-hn-bonus {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 999px;
  color: #fbcfe8;
  background: rgba(236,72,153,.18);
  border: 1px solid rgba(244,114,182,.35);
  font-size: 10px;
}
.ttl-comm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ttl-comm-card {
  min-height: 238px;
  padding: 21px;
  border-radius: 18px;
  background: rgba(18,13,36,.88);
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
}
.ttl-footer { padding: 34px 20px; }

@media (max-width: 900px) {
  .ttl-feat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ttl-hn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ttl-nav-inner { padding: 0 14px; }
  .ttl-nav-logo { height: 36px; }
  .ttl-nav-inner > div:last-child .gold-bevel-btn { padding: 8px 12px !important; font-size: 11px !important; }
  .ttl-floating-dock { left: 8px; top: auto; bottom: 14px; transform: none; flex-direction: row; }
  .ttl-hero { min-height: auto; padding: 70px 16px 64px; }
  .ttl-hero-logo { width: min(390px, 88vw); }
  .ttl-hero-desc { font-size: 13px; line-height: 1.6; }
  .ttl-section { padding: 58px 16px; }
  .ttl-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ttl-feat-card { min-height: 176px; padding: 18px 10px 14px; }
  .ttl-feat-title { font-size: 15px; }
  .ttl-feat-desc { font-size: 11px; }
  .ttl-hn-grid, .ttl-comm-grid { grid-template-columns: 1fr; }
  .ttl-hn-card { min-height: 138px; }
}

@media (max-width: 380px) { .ttl-feat-grid { grid-template-columns: 1fr; } }
/* Social dock placement: keep channels in the right edge, clear of logo and CTA */
.ttl-floating-dock { left: auto; right: 16px; }
@media (max-width: 640px) { .ttl-floating-dock { left: auto; right: 8px; bottom: 14px; } }
/* Final social dock anchor */
.ttl-floating-dock { left: auto !important; right: 16px !important; }
@media (max-width: 640px) { .ttl-floating-dock { left: auto !important; right: 8px !important; bottom: 14px !important; } }
/* Quick social dock: Discord + TikTok, fixed to the right edge */
.ttl-quick-dock {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ttl-quick-dock .ttl-dock-item {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: rgba(17,12,34,.9);
  border: 1px solid rgba(212,175,55,.25);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
@media (max-width: 640px) {
  .ttl-quick-dock {
    right: 8px;
    top: auto;
    bottom: 14px;
    transform: none;
    flex-direction: row;
  }
}

/* Community section aligned with the landing React design */
#community.ttl-section {
  max-width: 1280px;
  padding: 82px 72px 90px;
}
#community .ttl-sec-header {
  max-width: 760px;
  margin: 0 auto 32px;
  text-align: center;
}
#community .ttl-sec-title {
  font-size: clamp(25px, 3vw, 40px);
  letter-spacing: .02em;
}
#community .ttl-comm-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
#community .ttl-comm-card {
  min-height: 244px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 18px;
  background: rgba(18,13,36,.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 32px rgba(0,0,0,.3);
}
#community .ttl-comm-card.discord {
  border: 1px solid rgba(88,101,242,.58);
  box-shadow: 0 0 22px rgba(88,101,242,.13);
}
#community .ttl-comm-card.tiktok {
  border: 1px solid rgba(37,244,238,.58);
  box-shadow: 0 0 22px rgba(37,244,238,.12);
}
#community .ttl-comm-card.giftcode {
  border: 1px solid rgba(212,175,55,.58);
  box-shadow: 0 0 22px rgba(212,175,55,.12);
}
#community .ttl-comm-card > div:first-child > div:first-child {
  margin-bottom: 17px !important;
}
#community .ttl-card-icon {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 25px;
}
#community .ttl-card-discord {
  color: #5865f2;
  background: rgba(88,101,242,.18);
  border: 1px solid rgba(88,101,242,.55);
}
#community .ttl-card-tiktok {
  color: #25f4ee;
  background: rgba(37,244,238,.14);
  border: 1px solid rgba(37,244,238,.55);
}
#community .ttl-card-gift {
  color: #ffd34f;
  background: rgba(212,175,55,.14);
  border: 1px solid rgba(212,175,55,.55);
}
#community .ttl-card-icon svg { width: 24px; height: 24px; display: block; }
#community .ttl-comm-card h3 {
  margin: 0 0 8px !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  color: #f8f4ff !important;
}
#community .ttl-comm-card p {
  margin: 0 !important;
  color: rgba(235,229,245,.72) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}
#community .ttl-comm-card > div:last-child {
  margin-top: 24px !important;
}
#community .ttl-comm-card a.gold-bevel-btn {
  width: 100% !important;
  min-height: 40px;
  padding: 10px 12px !important;
  justify-content: center;
  border-radius: 10px;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: .06em;
}
#community .ttl-comm-card.discord a.gold-bevel-btn {
  background: #5865f2 !important;
  border-color: #7289da !important;
  color: #fff !important;
  box-shadow: 0 5px 18px rgba(88,101,242,.35) !important;
}
#community .ttl-comm-card.tiktok a.gold-bevel-btn {
  background: linear-gradient(90deg,#00d7ef,#16c4c7) !important;
  border-color: #25f4ee !important;
  color: #07131b !important;
  box-shadow: 0 5px 18px rgba(37,244,238,.24) !important;
}
#community .ttl-comm-card.giftcode .ttl-code-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 12px 0 8px;
  padding: 8px 10px;
  border-radius: 11px;
  background: rgba(2,2,8,.76);
  border: 1px solid rgba(212,175,55,.58);
}
#community .ttl-comm-card.giftcode .ttl-code-text {
  color: #fde047;
  font: 700 12px/1 monospace;
  letter-spacing: .08em;
}
#community .ttl-comm-card.giftcode .ttl-copy-btn {
  border: 0;
  border-radius: 7px;
  padding: 5px 8px;
  color: #fdf3b0;
  background: rgba(212,175,55,.24);
  font-size: 10px;
  cursor: pointer;
}
#community .ttl-comm-card.giftcode .gold-bevel-btn {
  background: linear-gradient(90deg,#ffae00,#ffc400) !important;
  border-color: #ffe38a !important;
  color: #251300 !important;
}
@media (max-width: 900px) {
  #community.ttl-section { padding-inline: 28px; }
}
@media (max-width: 680px) {
  #community.ttl-section { padding-inline: 16px; }
  #community .ttl-comm-grid { grid-template-columns: 1fr; }
  #community .ttl-comm-card { min-height: 220px; }
}
/* Community card alignment and mobile dock safety */
#community .ttl-comm-card h3,
#community .ttl-comm-card p { text-align: left; }
#community .ttl-comm-card > div:first-child > div:first-child { align-items: flex-start !important; }
@media (max-width: 760px) {
  .ttl-quick-dock {
    right: 8px;
    top: auto;
    bottom: 14px;
    transform: none;
    flex-direction: row;
  }
}
@media (max-width: 680px) {
  #community .ttl-comm-card { min-height: 220px; }
}
/* Community CTA sizing and giftcode balance */
#community .ttl-comm-card a.gold-bevel-btn {
  width: 92% !important;
  min-height: 36px;
  margin-inline: auto;
  padding: 8px 10px !important;
  font-size: 10px !important;
  line-height: 1.1;
}
#community .ttl-comm-card.giftcode { text-align: center; }
#community .ttl-comm-card.giftcode > div:first-child > div:first-child {
  justify-content: center !important;
  gap: 12px;
}
#community .ttl-comm-card.giftcode h3 { text-align: center !important; }
#community .ttl-comm-card.giftcode .ttl-code-box {
  width: min(100%, 300px);
  margin: 12px auto 8px !important;
  text-align: left;
}
#community .ttl-comm-card.giftcode > div:last-child {
  display: flex;
  justify-content: center;
}
#community .ttl-comm-card.giftcode > div:last-child .gold-bevel-btn {
  width: min(92%, 300px) !important;
}
/* Final compact CTA sizing */
#community .ttl-comm-card a.gold-bevel-btn {
  width: 86% !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 10px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 10px !important;
}
#community .ttl-comm-card.giftcode > div:first-child { text-align: center !important; }
#community .ttl-comm-card.giftcode h3 { text-align: center !important; }
#community .ttl-comm-card.giftcode .ttl-code-box { margin-inline: auto !important; }
#community .ttl-comm-card.giftcode > div:last-child { text-align: center !important; }
#community .ttl-comm-card.giftcode p { text-align: center !important; }
#community .ttl-comm-card.giftcode > div:last-child .gold-bevel-btn {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 10px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 auto !important;
  font-size: 10px !important;
}
/* Giftcode card uses the same structure as Discord/TikTok cards */
#community .ttl-comm-card.giftcode { text-align: left; }
#community .ttl-comm-card.giftcode > div:first-child > div:first-child {
  justify-content: space-between !important;
  gap: 0;
}
#community .ttl-comm-card.giftcode h3 { text-align: left !important; }
#community .ttl-comm-card.giftcode p { text-align: left !important; }
#community .ttl-comm-card.giftcode .ttl-code-box {
  width: 100%;
  margin: 12px 0 8px !important;
}
#community .ttl-comm-card.giftcode > div:last-child {
  display: block;
  text-align: left !important;
}
#community .ttl-comm-card.giftcode > div:last-child .gold-bevel-btn {
  width: 86% !important;
  margin: 0 auto !important;
}
/* Third community card follows the same left-aligned template */
#community .ttl-comm-grid > .ttl-comm-card:nth-child(3) { text-align: left !important; }
#community .ttl-comm-grid > .ttl-comm-card:nth-child(3) > div:first-child > div:first-child { justify-content: space-between !important; }
#community .ttl-comm-grid > .ttl-comm-card:nth-child(3) h3,
#community .ttl-comm-grid > .ttl-comm-card:nth-child(3) p { text-align: left !important; }
#community .ttl-comm-grid > .ttl-comm-card:nth-child(3) .ttl-code-box { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
#community .ttl-comm-grid > .ttl-comm-card:nth-child(3) > div:last-child { text-align: left !important; }
/* All Community CTA bars use one shared size */
#community .ttl-comm-card .gold-bevel-btn,
#community .ttl-comm-card a.gold-bevel-btn {
  width: 86% !important;
  max-width: none !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 10px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
/* Remove the old Giftcode max-width cap so its CTA matches the other bars */
#community .ttl-comm-card.giftcode > div:last-child .gold-bevel-btn {
  width: 86% !important;
  max-width: none !important;
  min-width: 0 !important;
}
#community .ttl-card-tiktok svg { width: 28px; height: 28px; }


/* Refined social dock v20260925230 */
.ttl-quick-dock {
  gap: 12px;
}
.ttl-quick-dock .ttl-dock-item {
  position: relative;
  width: 72px;
  height: 66px;
  padding: 9px 7px 8px;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(24,22,51,.97), rgba(8,9,26,.95)) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #fff;
  text-decoration: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.ttl-quick-dock .ttl-dock-item::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 15px;
  pointer-events: none;
  opacity: .85;
}
.ttl-quick-dock .ttl-dock-item svg {
  position: relative;
  z-index: 1;
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 auto;
  display: block;
}
.ttl-quick-dock .ttl-dock-label {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  color: #eef1ff !important;
  font-family: Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  text-align: center;
  white-space: nowrap;
}
.ttl-quick-dock .ttl-dock-item.discord {
  border-color: rgba(114,137,218,.78) !important;
  box-shadow: 0 9px 26px rgba(88,101,242,.22), inset 0 1px 0 rgba(255,255,255,.1);
}
.ttl-quick-dock .ttl-dock-item.discord::before {
  box-shadow: inset 0 0 18px rgba(88,101,242,.16);
}
.ttl-quick-dock .ttl-dock-item.tiktok {
  border-color: rgba(37,244,238,.78) !important;
  box-shadow: 0 9px 26px rgba(37,244,238,.18), inset 0 1px 0 rgba(255,255,255,.1);
}
.ttl-quick-dock .ttl-dock-item.tiktok::before {
  box-shadow: inset 0 0 18px rgba(37,244,238,.13);
}
.ttl-quick-dock .ttl-dock-item:hover {
  transform: translateX(-3px) scale(1.03);
  background: linear-gradient(145deg, rgba(32,30,66,.98), rgba(10,12,32,.98)) !important;
}
@media (max-width: 640px) {
  .ttl-quick-dock {
    right: 12px !important;
    bottom: 16px !important;
    gap: 10px;
  }
  .ttl-quick-dock .ttl-dock-item {
    width: 72px;
    height: 62px;
    border-radius: 15px;
    padding: 8px 7px;
  }
  .ttl-quick-dock .ttl-dock-item::before {
    border-radius: 14px;
  }
  .ttl-quick-dock .ttl-dock-item:hover {
    transform: translateY(-2px) scale(1.02);
  }
}


/* Balanced community card copy v20260925234 */
#community .ttl-comm-card h3,
#community .ttl-comm-card p {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  text-wrap: balance;
}
#community .ttl-comm-card h3 {
  min-height: 20px;
  line-height: 1.25;
}
#community .ttl-comm-card p {
  min-height: 36px;
  margin-top: 8px;
  line-height: 1.42;
  font-size: 12px;
}
#community .ttl-comm-card .ttl-code-box {
  margin-top: 10px !important;
}
@media (max-width: 980px) {
  #community .ttl-comm-card p {
    min-height: 0;
  }
}


/* Clean CTA text decoration v20260925236 */
#community .ttl-comm-card a.gold-bevel-btn,
#community .ttl-comm-card a.gold-bevel-btn:hover,
#community .ttl-comm-card a.gold-bevel-btn:focus,
#community .ttl-comm-card a.gold-bevel-btn:active {
  text-decoration: none !important;
}


/* Text-only top navigation v20260925238 */
.ttl-nav-links {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center;
}
.ttl-nav-links li,
.ttl-nav-links li::marker {
  list-style: none !important;
  content: none !important;
}
.ttl-nav-link,
.ttl-nav-link:hover,
.ttl-nav-link:focus,
.ttl-nav-link:active {
  display: inline-flex;
  align-items: center;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  text-decoration: none !important;
}


/* Xianxia background + subtle spiritual-qi atmosphere v20260925242 */
#ttl-landing-root {
  background-image:
    linear-gradient(180deg, rgba(6,8,22,.44) 0%, rgba(6,6,18,.64) 54%, rgba(4,4,13,.88) 100%),
    url('xianxia-bg.png') !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}
#ttl-landing-root::after {
  content: "";
  position: fixed;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  opacity: .32;
  background:
    radial-gradient(ellipse at 18% 52%, rgba(91,214,255,.16), transparent 30%),
    radial-gradient(ellipse at 82% 34%, rgba(173,120,255,.15), transparent 28%),
    radial-gradient(ellipse at 52% 86%, rgba(255,210,116,.10), transparent 24%);
  mix-blend-mode: screen;
  animation: ttlQiDrift 18s ease-in-out infinite alternate;
}
#ttl-landing-root > * {
  position: relative;
  z-index: 1;
}
@keyframes ttlQiDrift {
  0% { transform: translate3d(-1.5%, 0, 0) scale(1); opacity: .22; }
  50% { opacity: .36; }
  100% { transform: translate3d(1.5%, -1%, 0) scale(1.04); opacity: .28; }
}
@media (max-width: 680px) {
  #ttl-landing-root {
    background-attachment: scroll !important;
    background-position: 54% top !important;
  }
  #ttl-landing-root::after { opacity: .24; }
}


/* Keep content above the generated background */
#ttl-landing-root::after { display: none !important; }
#ttl-landing-root > * { z-index: auto !important; }
#ttl-landing-root > .ttl-nav-header {
  position: sticky !important;
  top: 0;
  z-index: 100 !important;
}


/* Ensure landing content remains visible above background */
#ttl-landing-root::before,
#ttl-landing-root::after { display: none !important; }
#ttl-landing-root > * {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: auto !important;
}
#ttl-landing-root > .ttl-nav-header {
  position: sticky !important;
  z-index: 100 !important;
}


/* Restore decorative layers and floating dock positioning */
#ttl-landing-root > .ttl-bg-glow,
#ttl-landing-root > .ttl-stars {
  position: absolute !important;
}
#ttl-landing-root > .ttl-quick-dock {
  position: fixed !important;
}


/* Drifting spiritual-qi animation v20260925252 */
#ttl-landing-root::before {
  content: "";
  display: block !important;
  position: fixed;
  inset: -10%;
  z-index: 1;
  pointer-events: none;
  opacity: .22;
  background-image:
    radial-gradient(circle at 18% 34%, rgba(160,232,255,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 46% 66%, rgba(255,224,148,.75) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 28%, rgba(200,170,255,.8) 0 1px, transparent 2px),
    radial-gradient(circle at 63% 82%, rgba(152,229,255,.7) 0 1px, transparent 2px);
  background-size: 260px 230px, 330px 300px, 290px 260px, 380px 340px;
  animation: ttlQiDust 24s linear infinite;
}
#ttl-landing-root::after {
  content: "";
  display: block !important;
  position: fixed;
  inset: -18%;
  z-index: 1;
  pointer-events: none;
  opacity: .25;
  filter: blur(9px);
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 38% 8% at 14% 52%, rgba(92,224,255,.42), transparent 72%),
    radial-gradient(ellipse 31% 7% at 84% 34%, rgba(190,148,255,.40), transparent 72%),
    radial-gradient(ellipse 28% 6% at 60% 78%, rgba(255,213,133,.26), transparent 74%);
  animation: ttlQiWisp 18s ease-in-out infinite alternate;
}
#ttl-landing-root > .ttl-nav-header { z-index: 100 !important; }
#ttl-landing-root > .ttl-quick-dock { z-index: 10001 !important; }
#ttl-landing-root > .ttl-hero,
#ttl-landing-root > .ttl-section { z-index: 10 !important; }
@keyframes ttlQiDust {
  from { transform: translate3d(-2%, -1%, 0); background-position: 0 0, 0 0, 0 0, 0 0; }
  to { transform: translate3d(2%, 2%, 0); background-position: 90px -70px, -100px 80px, 70px 100px, -120px -60px; }
}
@keyframes ttlQiWisp {
  from { transform: translate3d(-2.5%, 1%, 0) rotate(-1deg) scale(1); }
  to { transform: translate3d(2.5%, -1.5%, 0) rotate(1.5deg) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  #ttl-landing-root::before,
  #ttl-landing-root::after { animation: none !important; }
}


/* Visible spiritual-qi pass v20260925258 */
#ttl-landing-root::before {
  opacity: .42 !important;
  background-image:
    radial-gradient(circle at 18% 34%, rgba(160,232,255,.98) 0 1.5px, transparent 3px),
    radial-gradient(circle at 46% 66%, rgba(255,224,148,.9) 0 1.5px, transparent 3px),
    radial-gradient(circle at 78% 28%, rgba(200,170,255,.95) 0 1.5px, transparent 3px),
    radial-gradient(circle at 63% 82%, rgba(152,229,255,.88) 0 1.5px, transparent 3px) !important;
  animation-duration: 16s !important;
}
#ttl-landing-root::after {
  opacity: .48 !important;
  filter: blur(6px) saturate(1.35) !important;
  background:
    radial-gradient(ellipse 44% 9% at 13% 49%, rgba(92,224,255,.72), transparent 70%),
    radial-gradient(ellipse 38% 8% at 86% 34%, rgba(190,148,255,.66), transparent 70%),
    radial-gradient(ellipse 32% 7% at 61% 78%, rgba(255,213,133,.48), transparent 72%),
    conic-gradient(from 225deg at 17% 51%, transparent 0 20%, rgba(92,224,255,.18) 24%, transparent 38% 100%),
    conic-gradient(from 45deg at 84% 35%, transparent 0 26%, rgba(190,148,255,.16) 31%, transparent 46% 100%) !important;
  animation-duration: 12s !important;
}


/* Mobile quick dock: keep Discord and TikTok in a readable vertical stack */
@media (max-width: 640px) {
  .ttl-quick-dock {
    top: 50% !important;
    bottom: auto !important;
    right: 8px !important;
    transform: translateY(-50%) !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
}

/* Performance mode: disable decorative motion/effects only.
   Layout, colors, content, spacing and controls remain unchanged. */
#ttl-landing-root .ttl-bg-glow,
#ttl-landing-root .ttl-stars,
#ttl-landing-root::before,
#ttl-landing-root::after {
  display: none !important;
  animation: none !important;
}

#ttl-landing-root,
#ttl-login-overlay,
#ttl-landing-root *,
#ttl-login-overlay * {
  animation: none !important;
  transition: none !important;
}

#ttl-landing-root,
#ttl-login-overlay,
#ttl-landing-root .ttl-card,
#ttl-landing-root .ttl-comm-card,
#ttl-login-overlay .ttl-modal {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#ttl-landing-root .ttl-bg-glow,
#ttl-landing-root .ttl-nav-logo,
#ttl-landing-root .ttl-hero-logo,
#ttl-login-overlay img {
  filter: none !important;
}

/* 3 DOWNLOAD BUTTONS (PC, ANDROID, IOS) */
.ttl-download-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}

.ttl-dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(180deg, #f7d571 0%, #c4962c 60%, #8f6713 100%);
  color: #1a0f00;
  font-weight: 700;
  font-size: 15px;
  border: 1px solid #ffe396;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.ttl-dl-btn:hover {
  transform: translateY(-3px) scale(1.05);
  background: linear-gradient(180deg, #ffea9f 0%, #d4a737 60%, #a67c1c 100%);
  box-shadow: 0 8px 25px rgba(255, 215, 0, 0.6), inset 0 1px 0 #ffffff;
}

.ttl-dl-btn:active {
  transform: translateY(1px) scale(0.98);
}

@media (max-width: 600px) {
  .ttl-download-row {
    gap: 10px;
  }
  .ttl-dl-btn {
    padding: 10px 16px;
    font-size: 13px;
  }
}


.ttl-dl-btn,
a.ttl-dl-btn,
a.ttl-dl-btn:link,
a.ttl-dl-btn:visited,
a.ttl-dl-btn:hover,
a.ttl-dl-btn:active,
a.ttl-dl-btn:focus,
button.ttl-dl-btn {
  color: #1a0f00 !important;
  text-decoration: none !important;
  outline: none;
}

.ttl-dl-btn span,
.ttl-dl-btn svg {
  color: #1a0f00 !important;
  fill: #1a0f00 !important;
  text-decoration: none !important;
}