:root{
  --text:#eef2ee;
  --muted:#9fb3a3;
  --green:#3cdc5a;         /* bright Xbox green */
  --green-deep:#107C10;    /* classic Xbox green */
  --accent:#ff4d5e;        /* pass / nope */
  --blue:#3bc6ee;          /* played */
  --gold:#e8c468;          /* love / save accent */
  --panel:rgba(18,22,18,.62);
  --panel-2:rgba(26,32,26,.72);
  --card:rgba(28,34,28,.9);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:#0c0e0c;
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  overflow:hidden;display:flex;flex-direction:column;
}

/* ============ AMBIENT BACKDROP (light-black + green) ============ */
.bg-grid{
  position:fixed;inset:0;z-index:-3;
  background:
    linear-gradient(#0c0e0c,#0c0e0c),
    repeating-linear-gradient(0deg, rgba(60,220,90,.04) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(60,220,90,.04) 0 1px, transparent 1px 46px);
  background-blend-mode:normal;
}
.bg-glow{
  position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(60% 45% at 50% -5%, rgba(16,124,16,.55), transparent 70%),
    radial-gradient(45% 35% at 15% 10%, rgba(60,220,90,.16), transparent 70%),
    radial-gradient(50% 40% at 90% 100%, rgba(16,124,16,.22), transparent 70%);
}
.bg-dim{
  position:fixed;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.05) 30%, rgba(0,0,0,.45) 100%);
}

/* ============ Top bar ============ */
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:calc(var(--safe-top) + 14px) 18px 8px;flex:0 0 auto;}
.logo{
  display:flex;align-items:center;gap:10px;
  font-size:24px;font-weight:800;letter-spacing:.5px;margin:0;
  color:var(--text);text-shadow:0 2px 8px rgba(0,0,0,.6);
}
.logo .xlogo{width:30px;height:30px;display:inline-block;filter:drop-shadow(0 0 8px rgba(60,220,90,.55));}
.logo .xlogo svg{width:100%;height:100%;display:block;}
.icon-btn{background:var(--card);border:1px solid rgba(60,220,90,.18);color:var(--text);
  width:38px;height:38px;border-radius:50%;font-size:18px;}

/* ============ Search ============ */
.search-wrap{padding:4px 18px 8px;flex:0 0 auto;}
.search-wrap input{width:100%;padding:12px 16px;border-radius:14px;border:1px solid rgba(60,220,90,.14);
  background:var(--panel-2);color:var(--text);font-size:16px;backdrop-filter:blur(8px);}
.search-wrap input::placeholder{color:var(--muted);}

/* ============ Sub-tab pills ============ */
.pillbar{display:flex;gap:8px;overflow-x:auto;padding:2px 18px 8px;flex:0 0 auto;scrollbar-width:none;}
.pillbar::-webkit-scrollbar{display:none;}
.pill{flex:0 0 auto;background:var(--card);border:1px solid rgba(255,255,255,.06);color:var(--muted);
  padding:8px 15px;border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap;}
.pill.active{background:linear-gradient(90deg,var(--green-deep),var(--green));color:#04240a;border-color:transparent;
  box-shadow:0 4px 14px rgba(16,124,16,.4);}

/* ============ Main ============ */
main{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 0 100px;}
.section-title{font-size:19px;font-weight:800;margin:18px 18px 4px;text-shadow:0 1px 6px rgba(0,0,0,.7);}
.section-sub{color:var(--muted);font-size:12.5px;margin:0 18px 10px;}
.cat-sec{scroll-margin-top:8px;padding-top:4px;}
.cat-sec + .cat-sec{border-top:1px solid rgba(60,220,90,.1);margin-top:10px;}

.rail{display:flex;gap:12px;overflow-x:auto;padding:6px 18px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.rail::-webkit-scrollbar{display:none;}
.poster{flex:0 0 auto;width:158px;}
.cover{position:relative;width:158px;height:90px;border-radius:12px;overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.05);background:var(--card);}
.cover img,.cover .ph{width:100%;height:100%;object-fit:cover;display:block;background:var(--card);}
.cover .cov-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.92),transparent 66%);}
.cover .cov-title{position:absolute;left:0;right:0;bottom:0;padding:7px 9px;font-size:12.5px;font-weight:800;
  line-height:1.15;color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.85);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.poster .meta{font-size:11px;color:var(--muted);margin-top:4px;}
.poster .when{font-size:10.5px;font-weight:700;color:var(--green);margin-top:4px;}

.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:8px 18px;}
.grid .poster{width:100%;}
.grid .cover{width:100%;height:auto;aspect-ratio:16/9;}

.badge{display:inline-block;font-size:10px;font-weight:800;padding:3px 7px;border-radius:7px;margin-top:4px;}
.badge.gp{background:linear-gradient(90deg,var(--green-deep),var(--green));color:#04240a;}
.badge.soon{background:rgba(232,196,104,.2);color:var(--gold);}
.badge.price{background:rgba(59,198,238,.16);color:var(--blue);}

.empty{text-align:center;color:var(--muted);padding:50px 30px;}
.empty .big{font-size:46px;margin-bottom:10px;}
.empty p{line-height:1.55;}
.empty b{color:var(--text);}
.loading{text-align:center;color:var(--muted);padding:40px;}

/* ============ SWIPE DECK (For You) ============ */
.deck-wrap{position:relative;height:calc(100dvh - 250px);min-height:380px;display:flex;flex-direction:column;align-items:center;padding:6px 16px 0;}
.deck{position:relative;width:100%;max-width:360px;flex:1 1 auto;margin-top:4px;}
.swipe-card{
  position:absolute;inset:0;border-radius:22px;overflow:hidden;
  background:var(--card);box-shadow:0 18px 50px rgba(0,0,0,.6);border:1px solid rgba(60,220,90,.12);
  will-change:transform;touch-action:none;
}
.swipe-card img{width:100%;height:100%;object-fit:cover;pointer-events:none;}
.swipe-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;background:#000;}
.swipe-card .live-badge{position:absolute;top:14px;right:14px;z-index:6;font-size:10px;font-weight:800;
  padding:3px 8px;border-radius:7px;background:rgba(0,0,0,.55);color:var(--green);border:1px solid rgba(60,220,90,.4);
  letter-spacing:.5px;text-transform:uppercase;backdrop-filter:blur(4px);}
.swipe-card .info{position:absolute;left:0;right:0;bottom:0;padding:18px 18px 20px;
  background:linear-gradient(to top,rgba(0,0,0,.94),transparent);}
.swipe-card .info h3{margin:0 0 4px;font-size:22px;font-weight:800;}
.swipe-card .info p{margin:0;color:#cfe0d4;font-size:13px;}
.swipe-card .info .tags{margin-top:6px;font-size:11.5px;color:var(--green);font-weight:700;}
.stamp{position:absolute;top:26px;font-size:28px;font-weight:900;letter-spacing:2px;
  padding:6px 14px;border:4px solid;border-radius:12px;opacity:0;text-transform:uppercase;transform:rotate(-16deg);}
.stamp.like{left:22px;color:var(--green);border-color:var(--green);}
.stamp.nope{right:22px;color:var(--accent);border-color:var(--accent);transform:rotate(16deg);}
.stamp.love{left:50%;top:40px;transform:translateX(-50%);color:var(--gold);border-color:var(--gold);}
.stamp.seen{left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg);color:var(--blue);border-color:var(--blue);}

.star-save{position:absolute;top:14px;left:14px;z-index:6;width:46px;height:46px;border-radius:50%;
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.15);color:var(--gold);font-size:22px;
  backdrop-filter:blur(6px);}
.star-save.saved{background:var(--gold);color:#20240a;}

.deck-actions{display:flex;gap:14px;justify-content:center;padding:14px 0 calc(var(--safe-bottom) + 86px);}
.deck-actions button{width:54px;height:54px;border-radius:50%;border:none;font-size:23px;
  box-shadow:0 8px 22px rgba(0,0,0,.5);}
.act-nope{background:#2a1416;color:var(--accent);}
.act-seen{background:#0e2230;color:var(--blue);font-size:21px;}
.act-love{background:#2a2410;color:var(--gold);font-size:21px;}
.act-like{background:#10261a;color:var(--green);}
.deck-hint{color:var(--muted);font-size:12px;text-align:center;margin:2px 0 0;}

/* ============ Tab bar ============ */
.tabbar{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;
  background:rgba(10,12,10,.86);backdrop-filter:blur(20px);border-top:1px solid rgba(60,220,90,.1);
  padding:8px 0 calc(var(--safe-bottom) + 6px);z-index:20;}
.tab{background:none;border:none;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:11px;font-weight:600;flex:1;}
.tab .tab-ico{font-size:20px;opacity:.55;}
.tab.active{color:var(--green);}
.tab.active .tab-ico{opacity:1;}

/* ============ Sheets ============ */
.sheet{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;}
.sheet.hidden{display:none;}
.sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.68);}
.sheet-card{position:relative;width:100%;max-height:92vh;overflow-y:auto;background:#111411;
  border-radius:24px 24px 0 0;border-top:1px solid rgba(60,220,90,.28);
  padding:10px 20px calc(var(--safe-bottom) + 28px);animation:slideUp .28s cubic-bezier(.2,.8,.2,1);
  overscroll-behavior:contain;will-change:transform;}
@keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.sheet-handle{width:44px;height:6px;border-radius:3px;background:#3a4a3d;margin:4px auto 14px;
  padding:10px 30px;background-clip:content-box;box-sizing:content-box;cursor:pointer;}

.detail-hero{position:relative;border-radius:16px;overflow:hidden;margin-bottom:14px;background:#000;}
.detail-hero img,.detail-hero iframe{width:100%;display:block;border:0;}
.detail-hero iframe,.detail-hero video{width:100%;aspect-ratio:16/9;display:block;background:#000;}
.detail-hero .grad{position:absolute;inset:0;background:linear-gradient(to top,#111411,transparent 60%);pointer-events:none;}
.detail-title{font-size:24px;font-weight:800;margin:0 0 4px;}
.detail-meta{color:var(--muted);font-size:13px;margin-bottom:10px;line-height:1.5;}
.detail-meta b{color:#d6e6da;}

.scores{display:flex;gap:10px;margin:0 0 14px;flex-wrap:wrap;}
.score-chip{display:flex;align-items:center;gap:7px;background:var(--card);border-radius:12px;padding:8px 12px;font-weight:800;font-size:15px;}
.score-chip small{display:block;font-size:10px;font-weight:600;color:var(--muted);}
.meta-score{color:#6cc04a;}
.rawg-score{color:var(--green);}
.price-tag{color:var(--blue);}

.detail-overview{font-size:15px;line-height:1.5;color:#dfe8e1;margin-bottom:16px;}
.detail-overview.clamp{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;}
.more-btn{background:none;border:none;color:var(--green);font-size:13px;font-weight:700;padding:0 0 12px;}
h2.sub{font-size:17px;font-weight:800;margin:16px 0 8px;}

.shot-rail{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;}
.shot-rail::-webkit-scrollbar{display:none;}
.shot-rail img{flex:0 0 auto;width:240px;height:135px;object-fit:cover;border-radius:12px;background:var(--card);}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 8px;}
.chip{background:var(--card);border:1px solid rgba(60,220,90,.14);border-radius:999px;padding:6px 12px;font-size:12px;color:#cfe0d4;font-weight:600;}

.where-none{color:var(--muted);font-size:14px;}

.action-row{display:flex;gap:10px;margin:16px 0;}
.action-row button{flex:1;padding:13px;border-radius:13px;border:none;font-size:14px;font-weight:800;}
.btn-fav{background:var(--card);color:var(--text);}
.btn-fav.on{background:var(--gold);color:#20240a;}
.btn-watch{background:var(--card);color:var(--text);}
.btn-watch.on{background:linear-gradient(90deg,var(--green-deep),var(--green));color:#04240a;}

/* ============ Settings ============ */
.field-label{display:block;font-weight:800;margin:16px 0 4px;}
.field-label .req{font-size:10px;color:var(--accent);font-weight:700;vertical-align:middle;}
.field-label .opt{font-size:10px;color:var(--muted);font-weight:700;vertical-align:middle;}
.hint{color:var(--muted);font-size:12px;line-height:1.45;margin:2px 0 8px;}
#settings input[type=text],#settings select{width:100%;padding:12px;border-radius:12px;border:1px solid rgba(60,220,90,.14);
  background:var(--card);color:var(--text);font-size:15px;}
.connect-btn{width:100%;margin:2px 0 10px;padding:14px;border:none;border-radius:13px;font-size:15px;font-weight:800;
  background:linear-gradient(90deg,var(--green-deep),var(--green));color:#04240a;display:flex;align-items:center;justify-content:center;gap:8px;}
.connect-btn .xbox-ico{font-size:18px;}
.xbl-status{font-size:12.5px;color:var(--green);font-weight:700;margin-top:4px;min-height:16px;}
.xbl-status.err{color:var(--accent);}
.toggle-row{display:flex;align-items:center;justify-content:space-between;margin:18px 0 4px;font-weight:700;}
.toggle-row input{width:46px;height:28px;}
.link-btn{background:none;border:none;color:var(--green);font-size:13px;padding:6px 0;text-decoration:underline;}
.help-box{background:var(--card);border:1px solid rgba(60,220,90,.2);border-radius:12px;padding:12px 14px;margin-top:8px;
  font-size:13px;color:#d6e6da;line-height:1.5;}
.help-box ol{margin:8px 0 6px;padding-left:20px;}
.help-box li{margin:4px 0;}
.help-box a{color:var(--green);font-weight:700;}
.primary-btn{width:100%;margin-top:22px;padding:15px;border:none;border-radius:14px;
  background:linear-gradient(90deg,var(--green-deep),var(--green));color:#04240a;font-size:16px;font-weight:800;}
h2{font-size:22px;font-weight:800;margin:4px 0 6px;}

.toast{position:fixed;left:50%;bottom:calc(var(--safe-bottom) + 92px);transform:translateX(-50%);
  background:#16211a;color:var(--text);padding:12px 20px;border-radius:14px;font-size:14px;z-index:100;
  box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:82%;text-align:center;border:1px solid rgba(60,220,90,.25);}
.toast.hidden{display:none;}