/* ════════════════════════════════════════════════════════════════════════════
   tiktok-inner.css  —  TikTok-brand design for all inner pages
   Matches the visual language of Default.aspx (tiktok-feed.css)
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── Design tokens ──────────────────────────────────────────────────────── */
:root {
  /* TikTok brand */
  --tk-red:   #fe2c55;
  --tk-teal:  #25f4ee;
  --tk-bg:    #000000;
  --tk-dark:  #121212;
  --tk-card:  #1a1a1a;
  --tk-txt:   #ffffff;
  --tk-dim:   rgba(255,255,255,.5);
  --tk-sep:   rgba(255,255,255,.08);

  /* backward-compat aliases */
  --cyan:   #25f4ee;
  --mag:    #fe2c55;
  --yel:    #fffc00;
  --bg:     #000000;
  --card:   #1a1a1a;
  --txt:    #ffffff;
  --dim:    rgba(255,255,255,.5);
  --border: rgba(255,255,255,.08);

  --fd: 'Inter', sans-serif;      /* headings / titles   */
  --fb: 'Inter', sans-serif;     /* body text           */
  --fm: 'Inter', sans-serif;     /* counters / labels   */
  --brand: 'Orbitron', sans-serif; /* brand name only   */

  --bnav-h: 52px;
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; font-family: inherit }
html { -webkit-text-size-adjust: 100% }
body {
  background: var(--tk-bg);
  color: var(--tk-txt);
  font-family: var(--fb);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
a { color: var(--tk-teal); text-decoration: none }
a:hover { color: var(--tk-teal) }
img { display: block; max-width: 100% }
button { font: inherit; border: 0; background: none; color: inherit; cursor: pointer }

/* ─── Top navbar ─────────────────────────────────────────────────────────── */
.tk-nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: rgba(0,0,0,.96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.tk-icon-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer; border: 0; color: #fff;
  transition: background .18s;
}
.tk-icon-btn:active { background: rgba(255,255,255,.2) }
.tk-nav-title {
  font-family: var(--brand); font-size: .82rem; font-weight: 800;
  letter-spacing: .3px; flex: 1; color: #fff;
}
.tk-lang-nav {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff; font-size: .58rem; font-weight: 700; letter-spacing: .8px;
  flex-shrink: 0;
  transition: background .2s;
}
.tk-lang-nav:active { background: rgba(255,255,255,.2) }

/* ─── Drawer overlay ─────────────────────────────────────────────────────── */
.tk-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.78);
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
.tk-overlay.open { opacity: 1; pointer-events: all }

/* ─── Slide-in drawer ────────────────────────────────────────────────────── */
.tk-drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 272px; max-width: 82vw; z-index: 201;
  background: #121212;
  border-right: 1px solid rgba(255,255,255,.07);
  box-shadow: 4px 0 32px rgba(0,0,0,.7);
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
}
.tk-drawer.open { transform: translateX(0) }
.tk-drawer-head {
  padding: 18px 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: center; justify-content: space-between;
}
.tk-drawer-head img { height: 32px; width: auto }
.tk-drawer-body { padding: 8px 0; flex: 1 }
.tk-drawer-link {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  color: rgba(255,255,255,.5);
  font-family: var(--fb); font-size: .88rem; font-weight: 600; letter-spacing: .2px;
  transition: color .2s, background .2s;
  text-decoration: none; cursor: pointer;
}
.tk-drawer-link:hover,
.tk-drawer-link.active { color: #fff; background: rgba(255,255,255,.04) }
.tk-drawer-link.active { color: var(--tk-red) }
.tk-drawer-link svg { flex-shrink: 0 }
.tk-drawer-danger { color: var(--tk-red) !important }
.tk-drawer-foot {
  padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.07);
  display: flex; gap: 14px; font-size: .68rem; flex-wrap: wrap;
}
.tk-drawer-foot a {
  color: rgba(255,255,255,.38); text-decoration: none;
  font-family: var(--fb); transition: color .15s;
}
.tk-drawer-foot a:hover { color: var(--tk-teal) }

/* ─── Main content area ──────────────────────────────────────────────────── */
.tk-main {
  overflow-y: auto;
}
.tk-page {
  max-width: 480px; margin: 0 auto;
  padding: 14px 12px calc(var(--bnav-h) + 24px);
}

/* ─── Page title bar (header-bar) ────────────────────────────────────────── */
.header-bar {
  font-family: var(--fb); font-size: 1rem; font-weight: 700;
  color: #fff; padding: 4px 0 14px; letter-spacing: .02em;
}

/* ─── Section heading ────────────────────────────────────────────────────── */
.tk-heading,
.section-title {
  font-family: var(--fb); font-size: .72rem; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin: 2px 0 8px;
  display: flex; align-items: center; gap: 8px;
}
.tk-heading::after,
.section-title::after {
  content: ''; flex: 1; height: 1px;
  background: rgba(255,255,255,.07);
}

/* ─── "See all" / category link ──────────────────────────────────────────── */
.link {
  font-size: .68rem; color: var(--tk-red);
  font-weight: 600; white-space: nowrap;
  text-decoration: none; flex-shrink: 0;
}
.link:hover { color: #ff5c75 }
/* Hide "See all" when server didn't assign a real URL */
a.link:not([href]), a.link[href=""] { display: none !important; }

/* ─── Spacing / utility (Bootstrap-compat stubs) ─────────────────────────── */
.mt-0 { margin-top: 0 !important }
.mt-1 { margin-top: .25rem !important }
.mt-2 { margin-top: .5rem !important }
.mt-3 { margin-top: .75rem !important }
.mt-4 { margin-top: 1rem !important }
.mb-0 { margin-bottom: 0 !important }
.mb-2 { margin-bottom: .5rem !important }
.mb-3 { margin-bottom: .75rem !important }
.mb-4 { margin-bottom: 1rem !important }
.p-0  { padding: 0 !important }
.py-4 { padding-top: 1rem; padding-bottom: 1rem }
.text-center  { text-align: center !important }
.text-left    { text-align: left !important }
.text-right   { text-align: right !important }
.font-weight-bold { font-weight: 700 !important }
.text-dark    { color: rgba(255,255,255,.7) !important }
.d-flex       { display: flex !important }
.align-items-center    { align-items: center !important }
.justify-content-between { justify-content: space-between !important }
.justify-content-center  { justify-content: center !important }
.img-fluid    { max-width: 100%; height: auto; display: block }
.container,
.container-fluid { background: none !important; padding: 0 !important }

/* ─── Bootstrap grid ─────────────────────────────────────────────────────── */
.row {
  display: flex; flex-wrap: wrap;
  margin-left: -5px; margin-right: -5px;
}
[class*="col-"] { padding-left: 5px; padding-right: 5px; box-sizing: border-box }
.col-2   { flex: 0 0 auto; width: 16.666% }
.col-4   { flex: 0 0 auto; width: 33.333% }
.col-5   { flex: 0 0 auto; width: 41.666% }
.col-6   { flex: 0 0 auto; width: 50%; margin-bottom: 10px }
.col-12,
.col-xs-12 { flex: 0 0 auto; width: 100% }

/* ─── Bootstrap tabs (LeaderBoard) ──────────────────────────────────────── */
.nav-tabs {
  display: flex; gap: 0; list-style: none;
  border-bottom: 1px solid rgba(255,255,255,.12);
  margin: 0 0 16px; padding: 0;
}
.nav-item { display: block }
.nav-link {
  display: block;
  color: rgba(255,255,255,.5) !important;
  font-family: var(--fb); font-weight: 600; font-size: .76rem;
  padding: 9px 18px;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: none !important;
  transition: color .2s, border-color .2s;
  text-decoration: none;
}
.nav-link:hover { color: #fff !important; border-bottom-color: rgba(255,255,255,.25) !important }
.nav-link.active {
  color: #fff !important;
  border-bottom: 2px solid #fff !important;
  font-weight: 700;
}
.tab-content { padding-top: 4px }
.tab-pane { display: none }
.tab-pane.show.active,
.tab-pane.active { display: block }

/* ─── Leaderboard table ──────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse }
.leaderboard-header th {
  color: rgba(255,255,255,.45);
  font-family: var(--fb); font-size: .6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  text-align: center;
}
.leaderboard-card td {
  padding: 12px 4px;
  color: #fff; font-size: .82rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
  text-align: center; vertical-align: middle;
}
/* Gold / silver / bronze for top 3 */
.leaderboard-card.rank-1:nth-child(2) td:first-child { color: #ffd700; font-weight: 800; font-size: .95rem }
.leaderboard-card.rank-1:nth-child(3) td:first-child { color: #c0c0c0; font-weight: 700 }
.leaderboard-card.rank-1:nth-child(4) td:first-child { color: #cd7f32; font-weight: 700 }

/* ─── Category sliders (replaces Slick carousel) ─────────────────────────── */
.slider { overflow: hidden }
.game-slider {
  display: flex; gap: 10px;
  overflow-x: auto; padding: 4px 0 14px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.game-slider::-webkit-scrollbar { display: none }
.game-card {
  flex: 0 0 110px;
  background: var(--tk-card);
  border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
  scroll-snap-align: start;
  text-decoration: none; display: block;
  transition: transform .15s;
}
.game-card:active { transform: scale(.96) }
.game-card img,
.game-card .img-fluid {
  width: 100%; aspect-ratio: 1;
  object-fit: cover; object-position: center top; display: block;
}
.game-card small,
.game-card .text-left small,
.game-card .text-left {
  display: block;
  font-family: var(--fb); font-size: .62rem; font-weight: 600;
  color: rgba(255,255,255,.82);
  padding: 6px 7px 8px; line-height: 1.3;
}

/* ─── Contents page — 2-col game grid ────────────────────────────────────── */
.container-games .row { display: flex; flex-wrap: wrap }
.more-game-card {
  background: var(--tk-card);
  border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
  margin-bottom: 2px;
  display: block; text-decoration: none;
  transition: transform .15s;
}
.more-game-card:active { transform: scale(.97) }
.more-game-card img {
  width: 100%; aspect-ratio: 1;
  object-fit: cover; object-position: center top; display: block;
}
.more-game-card a { display: block }
.more-game-card .title {
  font-size: .65rem; font-weight: 600;
  padding: 6px 8px 9px;
  color: rgba(255,255,255,.82); line-height: 1.3;
}

/* ─── Game detail page (GameDesc.aspx) ───────────────────────────────────── */
.details-game-card {
  background: var(--tk-card);
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
  margin-bottom: 16px;
}
.game-image {
  width: 100%; aspect-ratio: 9/16; max-height: 340px;
  object-fit: cover; object-position: center top; display: block;
}
.details-bar {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: calc(100% - 28px); margin: 14px auto;
  padding: 13px; border-radius: 999px;
  background: linear-gradient(135deg, var(--tk-red), #ee1d52);
  color: #fff !important; font-family: var(--fb);
  font-size: .8rem; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  box-shadow: 0 4px 20px rgba(254,44,85,.38);
  text-decoration: none !important; text-align: center;
  transition: transform .15s, box-shadow .15s;
}
.details-bar:hover { color: #fff !important; text-decoration: none !important }
.details-bar:active { transform: scale(.97); box-shadow: 0 2px 10px rgba(254,44,85,.2) }
.game-title {
  font-family: var(--fd); font-size: clamp(.9rem, 4vw, 1.2rem);
  font-weight: 800; color: #fff; line-height: 1.2;
  padding: 14px 14px 6px;
}
.game-description {
  font-size: .82rem; color: rgba(255,255,255,.68);
  line-height: 1.65; padding: 0 14px 16px;
}

/* ─── Account / Message card (MyAccount, Msg, TC, PrivacyPolicy) ──────────── */
.account-card {
  background: var(--tk-card);
  border-radius: 14px; overflow: visible;
  border: 1px solid rgba(255,255,255,.07);
  padding: 16px; color: #fff;
}
.account-card p,
.account-card div,
.account-card li { color: rgba(255,255,255,.72); font-size: .83rem; line-height: 1.7 }
.account-card h4,
.account-card h5 { color: var(--tk-teal); font-family: var(--fb); font-size: .82rem; font-weight: 700; margin: 14px 0 6px }
.account-card b,
.account-card strong { color: #fff }
.account-card a { color: var(--tk-teal) !important }
.account-card ol { padding-left: 18px; margin: 0 0 10px }
.account-card ol > li { margin-bottom: 10px; font-size: .83rem; color: rgba(255,255,255,.72) }
.account-card ul { list-style: none; padding: 0; margin: 0 0 10px }
.account-card ul li {
  position: relative; padding-left: 16px; margin-bottom: 7px;
  font-size: .8rem; color: rgba(255,255,255,.68);
}
.account-card ul li::before {
  content: '›'; position: absolute; left: 0;
  color: var(--tk-teal); font-weight: 700;
}

/* Inline-style overrides for content pages that set color:#000 or color:black */
.account-card [style*="color: black"],
.account-card [style*="color:#000"],
.account-card strong[style*="color"] { color: rgba(255,255,255,.9) !important }
.account-card [style*="font-size"] { color: rgba(255,255,255,.72) !important }

/* ─── FAQ / Help tables ───────────────────────────────────────────────────── */
.account-card table,
.content_list table {
  width: 100%; border-collapse: collapse;
  font-size: .72rem; margin: 10px 0;
}
.account-card table th,
.content_list table th {
  background: rgba(254,44,85,.1) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  padding: 8px !important; text-align: left;
  font-weight: 700;
}
.account-card table td,
.content_list table td {
  background: rgba(255,255,255,.03) !important;
  color: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  padding: 7px !important;
}
.account-card table th[style],
.account-card table td[style] {
  background: inherit !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* ─── Subscription box (MyAccount) ──────────────────────────────────────── */
.subscription-box {
  background: #0f0f0f;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.07);
  padding: 14px; margin-top: 12px;
  text-align: center;
}
.subscription-box h5 { color: #fff; font-size: .9rem; margin-bottom: 10px; font-weight: 700 }
.subscription-box p  { color: rgba(255,255,255,.62); font-size: .78rem; margin-bottom: 4px }
.subscription-box strong { color: #fff }

/* Unsubscribe button */
.btn-unsub {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 24px; border-radius: 999px; margin-top: 12px;
  background: linear-gradient(135deg, var(--tk-red), #ee1d52);
  color: #fff !important; text-decoration: none !important;
  font-family: var(--fb); font-size: .72rem; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(254,44,85,.3);
  border: 0; cursor: pointer; transition: transform .15s;
}
.btn-unsub:active { transform: scale(.97) }
.btn-unsub img { height: 32px; width: auto }

/* ─── Login page (overrides Login.aspx inline styles) ────────────────────── */
.login-box {
  width: 90% !important; max-width: 340px !important;
  margin: 40px auto !important; padding: 24px !important;
  background: var(--tk-card) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.6) !important;
}
.login-box h3 {
  color: #fff !important;
  font-family: var(--fb) !important;
  font-size: 1.1rem !important; font-weight: 700 !important;
  margin-bottom: 18px !important; text-align: center !important;
}
.txt {
  width: 100% !important; display: block !important;
  padding: 12px 14px !important; margin-bottom: 12px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.07) !important;
  color: #fff !important;
  font-family: var(--fb) !important; font-size: .9rem !important;
  outline: none !important;
}
.txt::placeholder { color: rgba(255,255,255,.35) !important }
.txt:focus {
  border-color: rgba(254,44,85,.4) !important;
  background: rgba(255,255,255,.1) !important;
}
.login-box .btn {
  width: 100% !important; padding: 13px !important;
  background: linear-gradient(135deg, var(--tk-red), #ee1d52) !important;
  color: #fff !important; border: none !important;
  border-radius: 999px !important;
  font-family: var(--fb) !important; font-size: .84rem !important;
  font-weight: 700 !important; letter-spacing: .5px !important;
  text-transform: uppercase !important; cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(254,44,85,.3) !important;
  transition: transform .15s !important;
}
.login-box .btn:active { transform: scale(.97) !important }
.msg { color: var(--tk-red) !important; text-align: center !important; margin-top: 10px !important; font-size: .8rem !important }

/* ─── Info card (tk-info-card) ───────────────────────────────────────────── */
.tk-info-card {
  background: var(--tk-card); border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px; padding: 16px; margin-bottom: 16px;
}
.tk-info-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: .82rem; line-height: 1.4;
}
.tk-info-row:last-child { border-bottom: 0; padding-bottom: 0 }
.tk-info-label {
  color: rgba(255,255,255,.45); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .5px;
  flex-shrink: 0; padding-top: 2px;
}
.tk-info-value { color: #fff; font-weight: 600 }
.tk-danger-btn {
  display: block; width: 100%; padding: 12px; margin-top: 14px;
  border-radius: 999px; text-align: center;
  border: 1px solid rgba(254,44,85,.35); background: rgba(254,44,85,.1);
  color: var(--tk-red); font-family: var(--fb); font-size: .7rem;
  font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: background .2s;
}
.tk-danger-btn:hover { background: rgba(254,44,85,.2); color: var(--tk-red) }

/* ─── Subscription offer card ────────────────────────────────────────────── */
.tk-sub-card {
  background: linear-gradient(135deg, rgba(254,44,85,.07), rgba(254,44,85,.03));
  border: 1px solid rgba(254,44,85,.18);
  border-radius: 14px; padding: 16px; margin-bottom: 16px;
}
.tk-sub-card p,
.tk-sub-msg { font-size: .8rem; color: rgba(255,255,255,.75); line-height: 1.55 }
.tk-sub-inner {
  border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
  padding: 12px; margin-top: 10px;
}
.tk-sub-inner-text { font-size: .78rem; color: rgba(255,255,255,.68); line-height: 1.5 }
.tk-sub-link {
  display: block; width: 100%; padding: 12px; margin-top: 12px;
  border-radius: 999px; text-align: center;
  background: linear-gradient(135deg, var(--tk-red), #ee1d52);
  color: #fff; font-family: var(--fb); font-size: .7rem; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 4px 16px rgba(254,44,85,.3); transition: transform .15s;
}
.tk-sub-link:active { transform: scale(.97) }

/* ─── Prose pages (TC, PrivacyPolicy, Help, FAQ) ─────────────────────────── */
.tk-prose {
  font-size: .83rem; color: rgba(255,255,255,.72); line-height: 1.75;
}
.tk-prose h3,
.tk-prose h4,
.tk-prose h5 {
  font-family: var(--fb); color: var(--tk-teal);
  font-size: .78rem; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; margin: 18px 0 8px;
}
.tk-prose ul { list-style: none; padding: 0; margin: 0 0 12px }
.tk-prose ul li {
  position: relative; padding-left: 16px; margin-bottom: 8px;
  font-size: .8rem; color: rgba(255,255,255,.65);
}
.tk-prose ul li::before {
  content: '›'; position: absolute; left: 0;
  color: var(--tk-teal); font-weight: 700;
}

/* content_list (FAQ page wrapper) */
.content_list {
  font-size: .83rem; color: rgba(255,255,255,.72); line-height: 1.75;
  padding: 8px 0;
}
.content_list h4 { color: var(--tk-teal); font-weight: 700; margin: 14px 0 6px; font-size: .84rem }
.content_list ul { list-style: none; padding: 0; margin: 0 0 10px }
.content_list ul li {
  position: relative; padding-left: 16px; margin-bottom: 7px;
  font-size: .8rem; color: rgba(255,255,255,.65);
}
.content_list ul li::before {
  content: '›'; position: absolute; left: 0;
  color: var(--tk-teal); font-weight: 700;
}
/* Override FAQ inline color:black on strong */
.content_list strong[style],
.content_list [style*="color: black"],
.content_list [style*="color:#000"] { color: rgba(255,255,255,.9) !important }
.content_list [style*="color: #000"],
.content_list [style*="color:#FFF"],
.content_list [style*="color: #FFF"] { color: rgba(255,255,255,.72) !important }
/* FAQ top_m */
.top_m { margin-top: .5rem }
.top_m h4 { color: #fff; font-family: var(--fb); font-size: 1rem; font-weight: 700 }

/* ─── Game grid (tk-grid) ────────────────────────────────────────────────── */
.tk-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px }
.tk-card {
  background: var(--tk-card); border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  transition: transform .15s; text-decoration: none; display: block;
}
.tk-card:active { transform: scale(.97) }
.tk-card-img {
  width: 100%; aspect-ratio: 1;
  object-fit: cover; object-position: center top; display: block;
}
.tk-card-body { padding: 6px 8px 9px }
.tk-card-title {
  font-size: .65rem; font-weight: 600; color: #fff; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tk-stars { font-size: .72rem; letter-spacing: 1px; margin-top: 5px; line-height: 1 }
.tk-stars .on { color: #fffc00 }
.tk-stars .off { color: rgba(255,255,255,.18) }

/* ─── Game detail panel (tk-game-panel) ──────────────────────────────────── */
.tk-game-panel {
  background: var(--tk-card); border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px; overflow: hidden; margin-bottom: 20px;
}
.tk-game-panel-inner { display: flex; gap: 12px; padding: 14px }
.tk-game-thumb { width: 100px; flex-shrink: 0; border-radius: 10px; overflow: hidden }
.tk-game-thumb img {
  width: 100%; aspect-ratio: 3/4;
  object-fit: cover; object-position: center top; display: block;
}
.tk-game-meta { flex: 1; min-width: 0 }
.tk-game-name {
  font-family: var(--fd); font-size: clamp(.82rem,3.5vw,1.05rem);
  font-weight: 800; line-height: 1.2; margin-bottom: 8px; color: #fff;
}
.tk-play-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 11px; border-radius: 999px;
  background: linear-gradient(135deg, var(--tk-red), #ee1d52);
  color: #fff; font-family: var(--fb); font-size: .7rem; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 4px 16px rgba(254,44,85,.3); transition: transform .15s; margin-top: 10px;
}
.tk-play-btn:active { transform: scale(.97) }
.tk-game-desc-panel { padding: 0 14px 14px }
.tk-game-desc { font-size: .82rem; color: rgba(255,255,255,.68); line-height: 1.55 }

/* ─── Language badge / button ────────────────────────────────────────────── */
.tk-lang-btn { border-top: 1px solid rgba(255,255,255,.07); margin-top: 4px; padding-top: 14px }
.tk-lang-badge {
  margin-left: auto; padding: 2px 7px; border-radius: 999px;
  font-size: .6rem; font-weight: 700; letter-spacing: 1px;
  background: rgba(37,244,238,.15); border: 1px solid rgba(37,244,238,.3);
  color: var(--tk-teal); font-family: var(--fm);
}

/* ─── Empty / error ──────────────────────────────────────────────────────── */
.tk-empty {
  text-align: center; padding: 48px 20px;
  color: rgba(255,255,255,.4); font-family: var(--fb); font-size: .8rem;
}
.tk-error { font-size: .8rem; color: var(--tk-red); padding: 8px 0 }

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.tk-footer {
  display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;
  padding: 16px 12px; border-top: 1px solid rgba(255,255,255,.07);
  font-size: .62rem; letter-spacing: .5px; text-transform: uppercase;
}
.tk-footer a { color: rgba(255,255,255,.4); text-decoration: none; transition: color .15s }
.tk-footer a:hover { color: var(--tk-teal) }

/* ════════════════════════════════════════════════════════════════════════════
   BOTTOM NAVIGATION BAR  (identical to tiktok-feed.css)
   ════════════════════════════════════════════════════════════════════════════ */
.tk-bnav {
  position: fixed; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%; max-width: 480px;
  height: calc(var(--bnav-h) + env(safe-area-inset-bottom,0px));
  padding-bottom: env(safe-area-inset-bottom,0px);
  background: rgba(0,0,0,.95);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: center;
  z-index: 50;
}
.tk-bnav-item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  color: rgba(255,255,255,.45);
  font-family: var(--fb); font-size: .5rem; font-weight: 600; letter-spacing: .4px;
  padding: 8px 0; text-decoration: none;
  transition: color .2s;
}
.tk-bnav-item.active { color: #fff }
.tk-bnav-item svg { transition: transform .15s }
.tk-bnav-item:active svg { transform: scale(.88) }
/* TikTok + button */
.tk-bnav-plus-wrap { flex: 1.1 }
.tk-bnav-plus-btn {
  position: relative; width: 44px; height: 30px;
  display: flex; align-items: center; justify-content: center;
}
.tk-bnav-plus-btn::before {
  content: ''; position: absolute; inset: 0; left: -3px;
  width: 44px; height: 30px; border-radius: 8px;
  background: var(--tk-teal); z-index: 0;
}
.tk-bnav-plus-btn::after {
  content: ''; position: absolute; inset: 0; right: -3px; left: 3px;
  width: 44px; height: 30px; border-radius: 8px;
  background: var(--tk-red); z-index: 0;
}
.tk-bnav-plus-inner {
  position: relative; z-index: 1;
  width: 44px; height: 30px; border-radius: 7px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; font-weight: 700; color: #000; line-height: 1;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 360px) {
  .tk-bnav-item  { font-size: .45rem }
  .tk-page       { padding-left: 10px; padding-right: 10px }
  .game-card     { flex: 0 0 95px }
  .col-6         { width: 50% }
}
@media (min-width: 520px) {
  .tk-bnav       { max-width: 420px }
}

/* ─── Search overlay (inner pages) ──────────────────────────────────────── */
.fd-search-ov {
  position: fixed; inset: 0; z-index: 300;
  background: var(--tk-bg);
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.fd-search-ov.open { transform: translateY(0) }
.fd-search-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--tk-sep);
  flex-shrink: 0;
}
.fd-search-inp {
  flex: 1; height: 38px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: 0 36px 0 12px;
  color: #fff; font-size: .92rem; font-family: var(--fb);
  outline: none;
}
.fd-search-inp::placeholder { color: rgba(255,255,255,.35) }
.fd-search-inp:focus { border-color: var(--tk-teal) }
.fd-search-clr {
  display: none; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.1);
  flex-shrink: 0;
}
.fd-search-res {
  flex: 1; overflow-y: auto; padding: 8px 0;
}
.fd-search-card {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  color: #fff; text-decoration: none;
  transition: background .15s;
}
.fd-search-card:hover, .fd-search-card:active { background: rgba(255,255,255,.05) }
.fd-search-card img {
  width: 52px; height: 52px; border-radius: 10px;
  object-fit: cover; flex-shrink: 0;
  background: rgba(255,255,255,.08);
}
.fd-search-info { flex: 1; min-width: 0 }
.fd-search-name {
  font-size: .88rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fd-search-cat {
  font-size: .74rem; color: var(--tk-dim); margin-top: 2px;
}
.fd-search-arrow { color: rgba(255,255,255,.3); flex-shrink: 0 }
.fd-search-hint, .fd-search-empty {
  padding: 40px 20px; text-align: center;
  color: rgba(255,255,255,.38); font-size: .88rem;
}