/* ===================== FlicksFire — user app styles ===================== */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#0a0a12; --surface:#14141f; --surface-2:#1c1c2b; --surface-3:#25253a;
  --line:rgba(255,255,255,.07); --text:#f4f4f7; --muted:#9aa0ac; --muted-2:#6b7280;
  --flame-a:#ff7a18; --flame-b:#ff2e63; --violet:#7c3aed; --gold:#fbbf24;
}
body.light{
  --bg:#f6f7fb; --surface:#ffffff; --surface-2:#eef1f6; --surface-3:#e2e6ee;
  --line:rgba(0,0,0,.08); --text:#0f172a; --muted:#64748b; --muted-2:#94a3b8;
}
body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;overflow-x:hidden;transition:background .3s,color .3s}
img{max-width:100%}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-thumb{background:var(--flame-b);border-radius:10px}
.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}

@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes flamePulse{0%,100%{text-shadow:0 0 8px rgba(255,46,99,.35)}50%{text-shadow:0 0 22px rgba(255,122,24,.8)}}
@keyframes floatUp{0%{transform:translateY(100vh) rotate(45deg);opacity:0}12%{opacity:.5}88%{opacity:.5}100%{transform:translateY(-20vh) rotate(45deg);opacity:0}}

.flame-text{background:linear-gradient(120deg,var(--flame-a),var(--flame-b));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.app-shell{max-width:448px;margin:0 auto;position:relative;min-height:100vh;transition:opacity .7s ease}

.page{display:none;animation:fadeIn .28s ease-out}
.page.active{display:block}

.app-header{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.icon-btn{width:38px;height:38px;border-radius:50%;background:var(--surface-2);border:0;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.icon-btn:active{transform:scale(.94)}

.coin-chip{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--surface-2),var(--bg));border:1.5px solid rgba(251,191,36,.5);border-radius:999px;padding:4px 12px 4px 4px;cursor:pointer}
.coin-chip:active{transform:scale(.96)}
.coin-chip-icon{width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fde047,#b45309);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12px;color:#1e293b;border:1px solid #fde047}

.banner-wrap{position:relative;width:100%;height:11rem;border-radius:1rem;overflow:hidden;background:var(--surface-2);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.banner-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:10}

.quick-tile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 0;border-radius:1rem;background:var(--surface);border:0;color:var(--text);cursor:pointer;font-size:11px}
.quick-tile i{font-size:18px}
.quick-tile:active{transform:scale(.96)}

.section-title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px}
.link-sm{font-size:11px;color:var(--flame-b);background:none;border:0;cursor:pointer}
.num-badge{width:20px;height:20px;border-radius:50%;background:rgba(255,46,99,.15);color:var(--flame-b);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}

.tile{transition:transform .2s}
.tile:active{transform:scale(.97)}
.poster{width:100%;object-fit:cover;border-radius:.75rem}

.ff-input{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:13px;color:var(--text);outline:none;transition:border-color .2s}
.ff-input:focus{border-color:var(--flame-b)}
.btn-flame{width:100%;background:linear-gradient(120deg,var(--flame-a),var(--flame-b));color:#fff;border:0;border-radius:14px;padding:13px;font-weight:700;cursor:pointer}
.btn-flame:active{transform:scale(.98)}
.btn-ghost{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:12px;color:var(--text);cursor:pointer;width:100%}
.btn-mini{background:rgba(99,102,241,.15);border:1px solid rgba(99,102,241,.25);color:#a5b4fc;font-size:11px;font-weight:700;padding:4px 12px;border-radius:999px;cursor:pointer;white-space:nowrap}

.auth-card{background:var(--surface);border-radius:24px;padding:24px}
.pw-toggle{position:absolute;right:16px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--muted);cursor:pointer}
.auth-logo-mark{width:64px;height:64px;margin:6px auto 0;border-radius:20px;display:flex;align-items:center;justify-content:center;
  font-size:26px;color:#fff;background:linear-gradient(135deg,var(--flame-a),var(--flame-b));box-shadow:0 12px 30px rgba(255,46,99,.35)}
.google-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:14px;border-radius:14px;
  background:#fff;color:#1f2328;font-weight:700;font-size:15px;text-decoration:none;border:1px solid rgba(0,0,0,.12);
  box-shadow:0 6px 18px rgba(0,0,0,.25);transition:transform .12s,box-shadow .12s}
.google-btn:hover{box-shadow:0 8px 24px rgba(0,0,0,.32)}
.google-btn:active{transform:scale(.98)}
.google-btn svg{flex-shrink:0}

.glow-card{position:relative;background:linear-gradient(160deg,var(--surface) 0%,color-mix(in srgb,var(--surface) 70%,#0b1120) 100%);border:1px solid var(--line);border-radius:24px;padding:20px;overflow:hidden}
.avatar-lg{width:70px;height:70px;border-radius:50%;object-fit:cover;border:2px solid var(--flame-b);background:var(--surface-2);flex-shrink:0}
.member-badge{display:inline-flex;align-items:center;gap:4px;background:rgba(99,102,241,.2);border:1px solid rgba(99,102,241,.3);border-radius:999px;padding:2px 10px;font-size:10px;font-weight:600;color:#a5b4fc}
.coin-widget-sm{display:flex;flex-direction:column;align-items:center;justify-content:center;background:color-mix(in srgb,var(--bg) 70%,transparent);border:1px solid rgba(251,191,36,.4);border-radius:14px;padding:8px 10px;min-width:64px;flex-shrink:0;margin-left:auto}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;background:color-mix(in srgb,var(--bg) 55%,transparent);border:1px solid var(--line);border-radius:16px;padding:16px 10px;margin-top:16px;text-align:center}
.stat-grid i{font-size:16px}
.stat-grid .num{font-size:18px;font-weight:800;margin-top:4px}
.stat-grid .lbl{font-size:10px;color:var(--muted)}
.announce-badge{background:linear-gradient(135deg,#4c1d95,#6d28d9);border:1px solid rgba(139,92,246,.3);border-radius:12px;padding:10px 14px;font-size:13px;color:#fff}

.menu-item{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:15px;display:flex;align-items:center;gap:10px;cursor:pointer}
.menu-item:active{transform:scale(.97)}
.menu-item h4{font-size:13px;font-weight:600}
.menu-item p{font-size:10px;color:var(--muted);margin-top:2px}
.mi-icon{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.mi-arrow{margin-left:auto;color:var(--muted-2);font-size:12px}

.vip-banner{background:linear-gradient(135deg,#2e1065,#4c1d95);border:1px solid rgba(139,92,246,.3);border-radius:16px;padding:16px;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.logout-card{width:100%;background:rgba(255,46,99,.08);border:1px solid rgba(255,46,99,.18);border-radius:16px;padding:16px;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.logout-card:active{transform:scale(.98)}

/* coins */
.coin-balance-card{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;background:color-mix(in srgb,var(--surface) 88%,#0b0e1a);border:1px solid var(--line);border-radius:28px;padding:22px;overflow:hidden}
.gold-coin{width:110px;height:110px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fde047,#eab308 50%,#a16207);display:flex;align-items:center;justify-content:center;font-size:38px;font-weight:900;color:#1e293b;border:4px solid #fef08a;flex-shrink:0}
.coin-balance-num{font-size:48px;font-weight:800;background:linear-gradient(to bottom,#fef08a,#fbbf24 45%,#b45309);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1}
.big-action{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:18px;color:#fff;border:0;cursor:pointer;text-align:left}
.big-action:active{transform:scale(.97)}
.big-action i:first-child{font-size:18px}
.quick-round{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;font-size:11px;font-weight:600;text-align:center}
.quick-round span{width:48px;height:48px;border-radius:50%;background:var(--surface-2);border:1px solid rgba(139,92,246,.3);display:flex;align-items:center;justify-content:center;font-size:18px;color:#a78bfa}
.quick-round:active{transform:scale(.94)}
.rank-card{display:flex;align-items:center;justify-content:space-between;background:color-mix(in srgb,var(--surface) 88%,#0b0e1a);border:1px solid var(--line);border-radius:24px;padding:20px}
.rank-shield{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,#4c1d95,#312e81);display:flex;align-items:center;justify-content:center;font-size:24px;border:2px solid rgba(139,92,246,.4)}
.tx-card{background:color-mix(in srgb,var(--surface) 88%,#0b0e1a);border:1px solid var(--line);border-radius:24px;padding:16px}
.tx-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;border-left:4px solid var(--line)}
.tx-row .amt{margin-left:auto;font-weight:700;font-size:13px}

.earn-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:16px}
.store-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px}

.setting-row{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;align-items:center;justify-content:space-between}
.setting-row h4{font-size:13px;font-weight:700}
.setting-row p{font-size:10px;color:var(--muted)}
.switch{position:relative;width:44px;height:24px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:var(--surface-3);border-radius:999px;transition:.2s;cursor:pointer}
.switch span::before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked+span{background:linear-gradient(120deg,var(--flame-a),var(--flame-b))}
.switch input:checked+span::before{transform:translateX(20px)}

.pro-card{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--surface-2),var(--surface));border:1px solid rgba(251,191,36,.2);border-radius:18px;padding:16px;cursor:pointer}
.pro-badge{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#fbbf24,#f97316);display:flex;align-items:center;justify-content:center;font-weight:900;color:#1e293b}
.plan-row{display:flex;align-items:center;justify-content:space-between;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:12px}
.unlock-opt{border:1px solid var(--line);border-radius:14px;padding:12px;cursor:pointer}
.unlock-opt.sel{border-color:var(--flame-b);border-width:2px}
.invite-strip{display:flex;align-items:center;justify-content:space-between;background:var(--surface-2);border:1px solid rgba(251,191,36,.2);border-radius:12px;padding:10px 12px;cursor:pointer}

/* bottom nav */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;max-width:448px;margin:0 auto;display:flex;justify-content:space-around;align-items:center;
  background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:8px 4px;z-index:40}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 12px;border-radius:12px;background:none;border:0;color:var(--muted);cursor:pointer;position:relative}
.nav-item i{font-size:18px}
.nav-item span{font-size:11px}
.nav-item.active{color:var(--flame-b)}
.nav-item.active::after{content:'';position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);width:18px;height:3px;border-radius:3px;background:linear-gradient(120deg,var(--flame-a),var(--flame-b))}
.nav-coins{background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.3);color:var(--gold)}
.nav-coins i,.nav-coins span{color:var(--gold)}

/* modals + toast */
.ff-modal{position:fixed;inset:0;z-index:1500;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.78);backdrop-filter:blur(6px);animation:fadeIn .2s ease}
.ff-modal.open{display:flex}
.ff-modal-card{width:100%;max-width:420px;max-height:92vh;overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:22px;animation:slideUp .3s ease-out}
.toast-wrap{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);z-index:2000;display:flex;flex-direction:column;gap:8px;align-items:center;width:max-content;max-width:90vw}
.toast{background:var(--surface-2);border:1px solid rgba(255,46,99,.3);border-radius:999px;padding:11px 18px;display:flex;align-items:center;gap:10px;font-size:13px;box-shadow:0 12px 30px rgba(0,0,0,.4);transform:translateY(120px);opacity:0;transition:all .3s}
.toast.show{transform:translateY(0);opacity:1}

/* splash */
.splash{position:fixed;inset:0;z-index:9999;background:#05050a;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:opacity 1s ease,visibility 0s linear 1s}
.splash.hide{opacity:0;visibility:hidden}
.splash-bg{position:absolute;inset:0;background:radial-gradient(circle at 25% 20%,rgba(255,122,24,.14),transparent 55%),radial-gradient(circle at 80% 85%,rgba(124,58,237,.16),transparent 55%),#05050a}
.splash-inner{position:relative;z-index:2;text-align:center}
.ember{position:absolute;width:2px;height:52px;filter:blur(3px);transform:rotate(45deg);background:linear-gradient(#ff7a18,transparent);animation:floatUp 7s infinite linear}
.splash-logo{font-size:clamp(2.6rem,11vw,4.4rem);font-weight:900;letter-spacing:.12em;animation:flamePulse 2.4s ease-in-out infinite}
.splash-sub{font-size:.68rem;letter-spacing:.42em;color:#8b8b96;text-transform:uppercase;margin-top:2px}
.splash-reel{width:66px;height:66px;border-radius:50%;border:3px solid rgba(255,46,99,.2);border-top-color:#ff2e63;border-right-color:#ff7a18;animation:spin 1.1s cubic-bezier(.68,-.55,.27,1.55) infinite;margin:24px auto 0}
.splash-track{width:220px;max-width:70vw;height:3px;border-radius:6px;background:#1b1b28;overflow:hidden;margin:20px auto 0}
.splash-fill{width:0;height:100%;background:linear-gradient(90deg,#ff7a18,#ff2e63);box-shadow:0 0 12px #ff2e63}
.splash-loading{color:#c9c9d2;font-size:.8rem;letter-spacing:3px;text-transform:uppercase;margin-top:16px}
.splash-credit{position:absolute;bottom:26px;left:0;right:0;text-align:center;font-size:.62rem;letter-spacing:1px;color:rgba(255,255,255,.4);text-transform:uppercase}
.spinner{width:36px;height:36px;border:3px solid rgba(255,46,99,.25);border-top-color:#ff2e63;border-radius:50%;animation:spin .8s linear infinite;margin:24px auto}
.backdrop-fade::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,var(--bg) 4%,rgba(10,10,18,.5) 45%,transparent 100%)}

/* ===== in-app video player (webview) ===== */
.player-overlay{position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.94);display:none;align-items:center;justify-content:center;padding:0}
.player-overlay.open{display:flex}
.player-box{position:relative;width:100%;height:100%;background:#000}
.player-box iframe{width:100%;height:100%;border:0;display:block}
.player-close{position:absolute;top:14px;right:14px;z-index:3010;width:42px;height:42px;border-radius:50%;border:0;
  background:rgba(20,20,31,.85);color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.player-close:active{transform:scale(.92)}
@media (min-width:900px){
  .player-overlay{padding:24px}
  .player-box{width:min(100%,1120px);height:auto;aspect-ratio:16/9;border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6)}
  .player-close{top:-52px;right:0}
}

/* ===== tablet ===== */
@media (min-width:640px) and (max-width:1023px){
  .app-shell{max-width:600px}
}

/* ===== desktop: use the whole screen ===== */
@media (min-width:1024px){
  .app-shell{max-width:1200px}
  main{padding-bottom:0!important}

  /* bottom nav -> top nav bar */
  .bottom-nav{position:sticky;top:0;bottom:auto;max-width:1200px;border-top:0;border-bottom:1px solid var(--line);
    justify-content:flex-start;gap:4px;padding:10px 22px}
  .bottom-nav .nav-item{flex-direction:row;gap:8px;padding:9px 16px;border-radius:10px}
  .bottom-nav .nav-item i{font-size:15px}
  .bottom-nav .nav-item span{font-size:13px}
  .bottom-nav .nav-item.active::after{display:none}
  .bottom-nav .nav-item.active{background:linear-gradient(120deg,rgba(255,122,24,.16),rgba(255,46,99,.16))}
  .nav-coins{order:99;margin-left:auto}

  .app-header{padding-left:22px;padding-right:22px}

  /* list grids fill the width */
  #categories-grid.grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
  #trending-grid.grid,#watchlist-grid.grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px}
  #upcoming-grid.grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px}
  #search-results.grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  #categories-grid .h-32{height:150px}
  #trending-grid .h-40,#watchlist-grid .h-40,#search-results .h-40{height:260px}
  #upcoming-grid .h-44{height:280px}

  /* home carousels: bigger tiles */
  #home-rows .tile.w-28{width:158px}
  #home-rows .h-40{height:230px}
  #home-rows{max-width:1160px}

  /* movie detail centred, calmer backdrop */
  #details-content .pt-56{padding-top:19rem}
  #details-content .h-80{height:26rem}
  #details-content > .relative,#details-content > .min-h-screen{max-width:1000px;margin:0 auto}
  #details-content .grid-cols-4{grid-template-columns:repeat(4,minmax(0,140px));justify-content:start;gap:14px}

  /* coins / earn / store / settings read better centred */
  #coins-page .p-4,#earn-page .p-4,#store-page .p-4,#settings-page .p-4,
  #profile-authed,#edit-page .p-4,#request-page .p-4,#support-page .p-4,#leaderboard-list{max-width:760px;margin-left:auto;margin-right:auto}
  .banner-wrap{height:16rem;max-width:1160px}
}