/* ====== Reset & Base ====== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  background: #0e0f13;
  color: #f2f3f7;
}

/* ====== Utilities ====== */
.hidden { display: none !important; }
a { color: #8ab4ff; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ====== Top bar ====== */
.top-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 18px;
}
.stream-title { font-size: 18px; font-weight: 700; }
.stream-sub { opacity: .8; font-size: 12px; margin-top: 2px; }
.top-right { display:flex; gap: 10px; align-items:center; }
.badge {
  background: #191b22; color:#f2f3f7; border:1px solid #242634; border-radius: 999px;
  padding: 6px 12px; font-size: 12px;
}
.badge.ghost { opacity: .8; }
.logout-link { font-size: 12px; }

/* ====== App Shell ======*/
.main-area { padding: 16px; position: relative; min-height: calc(100vh - 130px);}

/* ====== Offline / Hero card ====== */
.offline-card {
  width: 560px; max-width: 96%;
  margin: 48px auto 0;
  border-radius: 16px;
  padding: 40px 28px;
  background: #12131a;
  border: 1px solid #1e2130;
  text-align:center;
}
.offline-icon { font-size: 36px; margin-bottom: 4px; }
.offline-card h2 { margin: 8px 0 6px; }
.offline-card .sub { opacity:.7; font-size: 12px; }

/* ====== Message bubbles (left) ====== */
.message-panel {
  position: absolute; left: 18px; top: 18px; width: 320px; max-width: 60vw;
  display: flex; flex-direction: column; gap: 8px;
}
.msg-item {
  background: #171923; border: 1px solid #23263a;
  padding: 8px 10px; border-radius: 12px; font-size: 12px;
}

/* ====== Toasts (right) ====== */
.toast-panel {
  position: absolute; right: 18px; top: 18px; width: 320px; max-width: 60vw;
  display: flex; flex-direction: column; gap: 8px;
}
.toast-item {
  background: #12231a; border: 1px solid #1c3b2a;
  padding: 10px 12px; border-radius: 12px; font-size: 12px; color:#b9ffd1;
}


/* ====== Bottom nav ====== */
.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 90px;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: #0c0d10;
  border-top: 1px solid #1b1e2b;

  transform: translateY(0);
  opacity: 1;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Mobile helper: temporarily hide bottom bar so WebRTC controls (mute/fullscreen) are tappable */
body.video-controls-peek .bottom-bar {
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
}

.nav-btn {
  border: 1px solid #24293b; background:#171a24; color:#fff;
  padding: 8px 12px; border-radius: 999px; font-size: 12px; cursor: pointer;
}
.nav-btn.green { background: #173020; border-color:#245834; }
.nav-btn.orange { background: #332217; border-color:#5b3a1f; }
.nav-btn.purple { background: #231b31; border-color:#3a2a5b; }
.nav-btn.yellow { background: #312b17; border-color:#5a4d1f; }
.nav-btn.small { padding:6px 10px; font-size: 12px; }
.chat-box { flex:1; }
.chat-box input {
  width:100%; background:#11121a; border:1px solid #23263a; color:#fff;
  padding: 10px 12px; border-radius: 12px;
}

/* ====== Modals ====== */
.modal {
  position: fixed; inset: 0; display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,0.55); z-index: 10;
}
.modal-card {
  width: 720px; max-width: 94vw;
  background: #11131a; border:1px solid #1d2030; color:#fff; border-radius:18px;
  padding: 16px 16px 18px;
  box-shadow: 0 20px 80px rgba(0,0,0,0.4);
}
.modal-card.wide { width: 980px; }
.modal-card.small-card { width: 460px; }
.modal-card.drop-card { width: 560px; }
.modal-card.topup-card { width: 520px; }
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom: 6px; }
.modal-header h3 { margin: 10px 4px; font-size: 18px; }
.close-btn {
  border:1px solid #2a2e42; background:#161926; border-radius: 999px; color:#fff; width:32px; height:32px;
}

/* ====== Coins pill ====== */
.coins-pill {
  display:inline-flex; align-items:center; gap:6px;
  background:#12141d; border:1px solid #22263a;
  padding: 8px 12px; border-radius: 999px; font-size: 14px; margin:10px 0 12px;
}
.coin-ico {
  display:inline-block; width:14px; height:14px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #ffdf8a, #ffb00f 60%, #985700);
}

/* ====== XP bar ====== */
.xp-bar-wrap {
  position: relative; height: 14px; border-radius: 999px; overflow: hidden;
  background: #1a1c26; border:1px solid #23263a; margin: 10px 0 24px;
}
.xp-bar {
  height: 100%;
  background: linear-gradient(90deg, #ff8a00, #ff2d55);
  width: 0%;
  transition: width .35s ease;
}
.xp-bar-label {
  position: absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size: 12px; color:#dfe3ff; text-shadow: 0 1px 0 rgba(0,0,0,.5);
}

/* ====== Actions grid & tiles ====== */
.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 180px);
  gap: 14px;
  margin-top: 8px;

  justify-content: center;
  align-content: start;   /* stops vertical stretching */
  align-items: start;     /* tiles keep natural height */
}


.action-tile {
  border: none;
  cursor: pointer;

  width: 180px;          /* locks tile width */
  min-height: 70px;      /* keeps them compact and consistent */

  padding: 12px 14px;
  border-radius: 14px;
  color: #fff;
  text-align: left;

  display: flex;
  flex-direction: column;
  justify-content: center;

  background: #181b24;
  border: 1px solid #24283a;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.action-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.action-title { font-weight: 700; margin-bottom: 6px; }
.action-cost { font-size: 12px; opacity:.9; }

/* keep tiles from looking tall if a title wraps */
.action-title {
  line-height: 1.1;
  margin-bottom: 4px;
}
.action-cost {
  line-height: 1.1;
}


/* Color themes for tiles */
.action-tile.blue   { background: linear-gradient(135deg, #1e37ff, #2aa0ff); }
.action-tile.red    { background: linear-gradient(135deg, #ff5858, #ff2d87); }
.action-tile.green  { background: linear-gradient(135deg, #0ea85f, #1cc07a); }
.action-tile.purple { background: linear-gradient(135deg, #6d38ff, #9a3eff); }
.action-tile.teal   { background: linear-gradient(135deg, #0c8ea1, #27c6de); }
.action-tile.gold   { background: linear-gradient(135deg, #f5a623, #ffd166); color:#1a1306; }
.action-tile.indigo { background: linear-gradient(135deg, #3a57ff, #637bff); }

/* ====== Drop modal ====== */
.modal-sub { opacity:.8; font-size: 13px; margin: 2px 0 10px; }
.drop-grid {
  display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; margin: 10px 0 12px;
}
.drop-tile {
  border:none; border-radius: 12px; padding: 16px 14px; text-align:left; cursor:pointer;
  color:#fff;
}

.drop-tile span { opacity:.9; font-size: 11px; display:block; margin-top: 2px; }
.drop-tile.blue { background: linear-gradient(135deg, #1f3dff, #2aa0ff); }
.drop-tile.green{ background: linear-gradient(135deg, #17a34a, #2edb7b); }
.drop-tile.purple{background: linear-gradient(135deg, #813bff, #a555ff); }
.drop-tile.teal { background: linear-gradient(135deg, #0c8ea1, #27c6de); }
.drop-tile.gold { background: linear-gradient(135deg, #f5a623, #ffd166); color:#fff; }
.custom-drop-row { display:flex; gap:10px; }
.custom-drop-row input{
  flex:1; background:#10131b; border:1px solid #1f2332; color:#fff; border-radius:12px; padding:10px 12px;
}
.btn-primary { background: linear-gradient(90deg, #ff8a00, #ff2d55); color:#fff; border:none; border-radius: 12px; padding: 10px 16px; cursor:pointer; }
.btn-primary.small{ padding: 8px 12px; font-size: 12px; }

/* ====== Top up tiles ====== */
.topup-card .topup-tile {
  border-radius: 14px; padding: 14px; margin: 12px 0; cursor: pointer; color:#fff;
}
.topup-card .topup-tile .topup-main { font-size: 20px; font-weight: 800; }
.topup-card .topup-tile .topup-sub { opacity: .95; margin-top: 2px; }
.topup-card .topup-tile .topup-bonus { margin-top: 4px; font-size: 12px; opacity: .95; }
.topup-card .topup-tile.blue   { background: linear-gradient(135deg, #1e37ff, #2aa0ff); }
.topup-card .topup-tile.green  { background: linear-gradient(135deg, #0ea85f, #1cc07a); }
.topup-card .topup-tile.purple { background: linear-gradient(135deg, #6d38ff, #9a3eff); }
.topup-card .topup-tile.gold   { background: linear-gradient(135deg, #f5a623, #ffd166); color:#1a1306; }

.custom-topup-row{ display:flex; gap:10px; margin-top: 10px; }
.custom-topup-row input {
  flex:1; background:#10131b; border:1px solid #1f2332; color:#fff; border-radius:12px; padding:10px 12px;
}
.topup-note { opacity:.7; font-size: 12px; margin-top: 8px; }

/* ====== Auth screen ====== */
.auth-body { min-height:100vh; display:flex; align-items:center; justify-content:center; position:relative; }
.auth-center { width:460px; max-width: 94vw; }
.auth-card {
  padding: 18px 18px 22px; background:#11131a; border:1px solid #1d2030; border-radius: 16px;
}

.auth-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 20px;
  max-width: 800px;
}

@media (max-width: 820px){
  .auth-grid{
    grid-template-columns: 1fr;
  }
}


.auth-title { font-weight:800; font-size: 24px; margin-bottom: 6px; }
.auth-sub { font-size: 12px; opacity:.8; }
.online { color:#00e091; } .offline{ color:#ff3e62; }
.auth-form { display:flex; flex-direction:column; gap:8px; margin-top: 12px; }
.auth-form input {
  background:#0f1118; border:1px solid #212436; color:#fff; border-radius: 10px;
  padding: 10px 12px;
}
.btn-primary[type=submit]{ width:100%; margin-top: 6px; }
.divider { text-align:center; opacity:.6; margin: 10px 0; }

/* admin cog on login */
.admin-cog {
  position: absolute; right: 16px; top: 12px; width: 28px; height: 28px; border-radius: 999px;
  border:1px solid #2a2e42; background:#161926; display:inline-block;
}


/* Tikfinity overlay container (below halfway down screen) */
#tiktok-events-container {
  position: fixed;
  top: 60vh;                       /* below halfway */
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(600px, 90vw);
  height: min(360px, 55vh);        /* bigger so lines don't get clipped */
  z-index: 9999;
  pointer-events: none;
}



#tiktok-events-overlay {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  pointer-events: none;
}

/* Force white text on Coin Drop buttons */
button.drop-card,
button.drop-card .drop-title,
button.drop-card .drop-small {
  color: #fff !important;
}

/* Chat input character counter */
.chat-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

#chatInput {
  flex: 1;
}

#chatCharCount {
  font-size: 11px;
  opacity: 0.7;
  white-space: nowrap;
}

/* Coin Drop header layout */
.coin-drop-header {
  margin-bottom: 10px;
}

.coin-drop-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.coin-drop-balance {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #12141d;
  border: 1px solid #22263a;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
}

/* Fallback: hide common bottom bar variants */
body.video-controls-peek .bottom-bar,
body.video-controls-peek .bottom-nav,
body.video-controls-peek #bottom-bar {
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
}

/* Invisible tap catcher over WebRTC iframe (mobile helper) */
#videoTapCatcher {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: transparent;
  pointer-events: auto;
}

/* On desktop, we don't need it */
@media (pointer: fine) {
  #videoTapCatcher {
    display: none;
  }
}

/* ===== Hide Scrollbars (keep scrolling enabled) ===== */

/* Firefox */
html, body, * {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important; /* IE/old Edge */
}

/* Chrome, Edge, Safari (and Chromium WebViews) */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  background: transparent !important;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
  background: transparent !important;
}