/* ====== 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:0;
  display:flex; gap:10px; align-items:center;
  padding: 10px 12px; background: #0c0d10; border-top: 1px solid #1b1e2b;
}
.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,.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,.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(6, minmax(140px,1fr));
  gap: 14px; margin-top: 8px;
}
.action-tile {
  border:none; cursor:pointer;
  padding: 16px 14px; border-radius: 14px; color:#fff; text-align:left;
  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; }

/* 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; color:#fff; padding: 16px 14px; text-align:left; cursor:pointer;
}
.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:#1a1306; }
.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-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;
}

/* TikTok overlay container */
#tiktok-events-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: min(600px, 90vw);
  height: 180px;
  z-index: 9999;
  pointer-events: none;
}

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