:root{
  --bg:#0b0b0f;
  --card:rgba(20,20,28,.78);
  --card2:rgba(16,16,22,.7);
  --text:#f2f2f5;
  --muted:rgba(242,242,245,.72);
  --line:rgba(255,255,255,.08);
  --gold:#f7d56b;
  --gold2:#f0c64e;
  --danger:#ff5a6b;
  --ok:#38d39f;
  --shadow:0 14px 40px rgba(0,0,0,.45);
  --r:18px;
  --r2:22px;
  /* Prefer a nicer rounded font if it is loaded (see index.html), but keep safe fallbacks */
  --font:'Manrope', 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  --accent-rgb: 247,213,107;
  --accent: rgb(var(--accent-rgb));


  /* Extra vivid accents (used only in normal mode) */
  --accent2-rgb: 142, 92, 255;
  --accent2: rgb(var(--accent2-rgb));
  --hot-rgb: 255, 72, 168;
  --hot: rgb(var(--hot-rgb));
}


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}

/* =========================
   VIVID TYPO + MICRO MOTION
   (applies ONLY when lite-mode is OFF)
   ========================= */

@keyframes gradientShift{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}
@keyframes textPop{
  0%{ transform: translateY(2px); opacity: 0; filter: blur(.6px); }
  100%{ transform: translateY(0); opacity: 1; filter: blur(0); }
}
@keyframes softPulse{
  0%,100%{ transform: scale(1); opacity: .92; }
  50%{ transform: scale(1.02); opacity: 1; }
}
@keyframes spin{
  to{ transform: rotate(360deg); }
}

/* Head titles (normal mode) */
body:not(.lite-mode) .h1{
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--hot));
  background-size: 220% 220%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Animation can be heavy on some devices; enable it only on hover/fine pointers (desktop). */
  text-shadow: 0 12px 34px rgba(0,0,0,.38);
}

@media (hover:hover) and (pointer:fine){
  body:not(.lite-mode) .h1{ animation: gradientShift 6.2s ease-in-out infinite; }
}

/* In main menu we keep the title vivid, but without continuous animation */
body.home-mode:not(.lite-mode) .h1{ animation: none; }
body:not(.lite-mode) #subtitle{
  animation: textPop .28s ease both;
}

/* Card headers: subtle colorful accent */
body:not(.lite-mode) .card-h{
  position: relative;
}
body:not(.lite-mode) .card-h::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  height:3px;
  width:74px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb),.95), rgba(var(--accent2-rgb),.85), rgba(var(--hot-rgb),.85));
  opacity:.65;
  filter: blur(.2px);
}

/* Buttons/chips: add a tiny "alive" shine + optional loading spinner */
body:not(.lite-mode) .chip{
  position: relative;
  overflow: hidden;
}
body:not(.lite-mode) .chip::after{
  content:"";
  position:absolute;
  inset:-50% -70%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  transform: translateX(-120%) rotate(12deg);
  transition: transform .55s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
body:not(.lite-mode) .chip:hover::after{ transform: translateX(120%) rotate(12deg); }

/* Optional loading state (can be toggled from JS by adding .is-loading) */
button.is-loading{ pointer-events:none; opacity:.88; }
button.is-loading::before{
  content:"";
  width:16px;
  height:16px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.55);
  border-top-color: rgba(255,255,255,0);
  display:inline-block;
  vertical-align:-3px;
  margin-right:8px;
  animation: spin .8s linear infinite;
}

/* Generic helper */
.hidden{display:none !important;}

.collapse{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 10px;
  background: rgba(255,255,255,.03);
}

.countdown{
  font-variant-numeric: tabular-nums;
}

/* =========================
   Preloader (custom)
   ========================= */
.preloader{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 14px;
  background:rgba(0,0,0,.75);
  backdrop-filter: blur(10px);
  opacity:1;
  transition: opacity .65s ease, transform .65s ease;
}
.preloader.is-hiding{
  opacity:0;
  transform: scale(1.02);
  pointer-events:none;
}
.preloader.is-hidden{ display:none; }

.preloader-shell{
  position:relative;
  width:min(420px, 92vw);
  max-height:86vh;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  background:rgba(10,10,14,.55);
  display:flex;
  flex-direction:column;
}


.preloader-art{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  filter: contrast(1.05) saturate(1.12);
}

/* UI overlay (covers the bottom part so we can show dynamic % and gold bar) */
.preloader-ui{
  padding:14px 16px 18px;
  background: rgba(0,0,0,.62);
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center;
}


.preloader-tag{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  letter-spacing:2px;
  color: var(--gold);
  text-shadow: 0 2px 12px rgba(0,0,0,.75);
  margin-bottom:6px;
}
.preloader-tag:before,
.preloader-tag:after{
  content:"";
  height:2px;
  width:38px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:.95;
}

.preloader-status{
  font-size:13px;
  color: rgba(242,242,245,.78);
  margin: 2px 0 8px;
  text-shadow: 0 2px 12px rgba(0,0,0,.75);
}

.preloader-percent{
  font-size:44px;
  font-weight:950;
  line-height:1;
  color:#fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.8);
  margin:2px 0 12px;
}

.preloader-bar{
  height:10px;
  width:min(340px, 86vw);
  margin:0 auto;
  border-radius:999px;
  overflow:hidden;
  background: rgba(0,0,0,.35);
  border:1px solid rgba(var(--accent-rgb),.55);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}

.preloader-bar-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, #f7d56b 0%, #f0c64e 50%, #f7d56b 100%);
  box-shadow: 0 0 18px rgba(var(--accent-rgb),.35);
  transition: width .25s ease;
}

.bg{
  position:fixed;
  inset:0;
  background-color:#1a1710;
  background:url('/static/background.png?v=20260202_vip25') center/cover no-repeat;
  filter:saturate(1.1) contrast(1.05);
  opacity:1;
  transform:scale(1.02);
}

.bg:after{
  content:"";
  position:absolute;
  inset:0;
  /* softer overlay so the background isn't a black/yellow flat screen */
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(0,0,0,.18), rgba(0,0,0,.62)),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.55));
  pointer-events:none;
}


.app{position:relative; max-width:1100px; margin:0 auto; padding:18px 14px 40px;}

/* =========================
   NORMAL MODE (more vivid + compact)
   Applies ONLY when lite-mode is OFF.
   ========================= */
body:not(.lite-mode){
  --shadow:0 16px 46px rgba(0,0,0,.50);
}
body:not(.lite-mode) .app{ padding:14px 12px 34px; }
body:not(.lite-mode) .top{ padding:14px; gap:12px; }
body:not(.lite-mode) input,
body:not(.lite-mode) textarea,
body:not(.lite-mode) select{
  padding:10px 12px;
  border-radius:13px;
}
body:not(.lite-mode) textarea{ min-height:104px; }

/* Make the background a bit more lively in normal mode */
body:not(.lite-mode) .bg{ filter:saturate(1.22) contrast(1.08); }

/* Bright + compact buttons (normal mode) */
body:not(.lite-mode) .btn{
  position:relative;
  overflow:hidden;
  padding:10px 12px;
  border-radius:14px;
  border-color: rgba(var(--accent-rgb),.72);
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb),.62) 0%, rgba(var(--accent2-rgb),.42) 52%, rgba(var(--hot-rgb),.22) 100%);
  box-shadow:
    0 10px 26px rgba(0,0,0,.40),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 18px rgba(var(--accent-rgb),.16);
  letter-spacing:.2px;
}
body:not(.lite-mode) .btn::after{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: translateX(-120%) rotate(15deg);
  transition: transform .55s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}

/* Button loading state (opt-in via JS: .is-loading) */
.btn.is-loading,
.chip.is-loading,
.iconbtn.is-loading,
.home-card.is-loading{
  position: relative;
  pointer-events: none;
  opacity: .92;
}
.btn.is-loading::before,
.chip.is-loading::before,
.iconbtn.is-loading::before,
.home-card.is-loading::before{
  content:"";
  position:absolute;
  top:50%;
  right:12px;
  width:16px;
  height:16px;
  margin-top:-8px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color: rgba(var(--accent-rgb),.95);
  animation: spin .85s linear infinite;
}
body.lite-mode .btn.is-loading::before,
body.lite-mode .chip.is-loading::before,
body.lite-mode .iconbtn.is-loading::before,
body.lite-mode .home-card.is-loading::before{
  border-top-color: rgba(255,255,255,.5);
}
body:not(.lite-mode) .btn:hover{
  filter: brightness(1.10) saturate(1.10);
  transform: translateY(-0.5px) scale(1.006);
}
body:not(.lite-mode) .btn:hover::after{
  transform: translateX(120%) rotate(15deg);
}
body:not(.lite-mode) .btn.danger{
  border-color:rgba(255,90,107,.55);
  background: linear-gradient(135deg, rgba(255,90,107,.50) 0%, rgba(var(--hot-rgb),.24) 60%, rgba(0,0,0,.10) 100%);
  box-shadow: 0 10px 26px rgba(0,0,0,.42), 0 0 18px rgba(255,90,107,.18);
}

/* Tabs + chips: more compact and a bit more vivid */
body:not(.lite-mode) .tab{
  padding:10px 8px;
  border-color: rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.16));
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}
body:not(.lite-mode) .tab.active{
  background: linear-gradient(135deg,
    rgba(var(--hot-rgb),.30),
    rgba(var(--accent2-rgb),.22),
    rgba(var(--accent-rgb),.16)
  );
  border-color: rgba(var(--accent-rgb),.42);
  box-shadow:
    0 14px 34px rgba(0,0,0,.40),
    0 0 0 3px rgba(var(--accent-rgb),.10) inset,
    0 0 26px rgba(var(--hot-rgb),.10);
}
body:not(.lite-mode) .chip{
  padding:7px 10px;
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}
body:not(.lite-mode) .chip.active{
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.18), rgba(var(--accent2-rgb),.10));
  border-color: rgba(var(--accent-rgb),.40);
}

/* Icon buttons in headers */
body:not(.lite-mode) .iconbtn{
  border-color: rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}


.top{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:16px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(20,20,28,.82), rgba(12,12,18,.72));
  border-radius:calc(var(--r2) + 6px);
  box-shadow:var(--shadow);
  backdrop-filter:blur(12px);
}

.brand{display:flex; align-items:center; gap:14px;}
.logo{width:48px; height:48px; border-radius:14px; object-fit:cover; border:1px solid rgba(255,255,255,.12);}
.titles .h1{font-weight:800; letter-spacing:.4px; font-size:20px;}
.titles .sub{color:var(--muted); margin-top:2px; font-size:13px;}


/* ===== Smoother press / hover / focus animations ===== */
.tab, .btn, .chip, .admin-btn{
  transition:
    transform 180ms cubic-bezier(.16,1,.3,1),
    box-shadow 220ms cubic-bezier(.16,1,.3,1),
    background 220ms cubic-bezier(.16,1,.3,1),
    border-color 220ms cubic-bezier(.16,1,.3,1),
    color 220ms cubic-bezier(.16,1,.3,1),
    filter 220ms cubic-bezier(.16,1,.3,1);
  will-change: transform;
  transform: translateZ(0);
}
.tab:active, .btn:active, .chip:active, .admin-btn:active{
  transform: translateY(0.5px) scale(0.992);
  filter: brightness(1.02);
}
.tab:focus-visible, .btn:focus-visible, .chip:focus-visible, .admin-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.18), var(--shadow);
}
/* class-based press (for pointer events, works better in Telegram webview)
   IMPORTANT: keep lite-mode minimal (no extra micro-animations) */
body:not(.lite-mode) .is-pressing{
  transform: translateY(0.5px) scale(0.992) !important;
  filter: brightness(1.02) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.08) inset, 0 10px 28px rgba(0,0,0,.35);
}

.tabs{display:flex; gap:10px;}
.tab{
  transition: transform 180ms cubic-bezier(.22,1,.36,1), filter 220ms cubic-bezier(.22,1,.36,1), background 260ms cubic-bezier(.22,1,.36,1), border-color 260ms cubic-bezier(.22,1,.36,1), box-shadow 260ms cubic-bezier(.22,1,.36,1);
  will-change: transform;
  flex:1;
  padding:12px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-weight:700;
  cursor:pointer;
}
.tab.active{
  background:linear-gradient(180deg, rgba(var(--accent-rgb),.25), rgba(var(--accent-rgb),.08));
  color:var(--text);
  border-color:rgba(var(--accent-rgb),.35);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.08) inset;
}

.tabs-wrap{display:flex; flex-direction:column; gap:10px;}
.tabs.tabs-main{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px;}
@media(max-width:700px){.tabs.tabs-main{grid-template-columns:repeat(2, minmax(0,1fr));}}
.tabs.tabs-admin{display:flex; gap:10px;}
.tabs.tabs-admin .tab{flex:1;}

.content{margin-top:14px;}
.page{animation:fade .18s ease-out;}
.page.hidden{display:none;}
@keyframes fade{from{opacity:.6; transform:translateY(6px)} to{opacity:1; transform:none}}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r2);
  box-shadow:var(--shadow);
  padding:14px;
  backdrop-filter:blur(10px);
}
.card + .card{margin-top:14px;}

.card-h{font-weight:800; letter-spacing:.3px; margin-bottom:12px;}
.row{display:flex; align-items:center; justify-content:space-between;}
.gap{gap:10px;}

.row.wrap{flex-wrap:wrap; justify-content:flex-start;}
.row.wrap > *{flex:1 1 180px;}
.divider{height:1px; background:var(--line); margin:12px 0;}

.grid2{display:grid; gap:14px; grid-template-columns:1.05fr .95fr;}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}

.grid3{display:grid; gap:12px; grid-template-columns:repeat(3, minmax(0,1fr)); margin-top:14px;}
@media(max-width:980px){.grid3{grid-template-columns:repeat(2, minmax(0,1fr));}}
@media(max-width:620px){.grid3{grid-template-columns:1fr;}}

.form{display:flex; flex-direction:column; gap:10px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field span{font-size:13px; color:var(--muted); font-weight:700;}
input, textarea, select{
  width:100%;
  border-radius:14px;
  border:1px solid var(--line);
  padding:11px 12px;
  background:var(--card2);
  color:var(--text);
  outline:none;
}
textarea{resize:vertical; min-height:110px;}

.btn{
  transition: transform 180ms cubic-bezier(.22,1,.36,1), filter 220ms cubic-bezier(.22,1,.36,1), background 260ms cubic-bezier(.22,1,.36,1), border-color 260ms cubic-bezier(.22,1,.36,1), box-shadow 260ms cubic-bezier(.22,1,.36,1);
  will-change: transform;
  border:1px solid rgba(var(--accent-rgb),.55);
  background:linear-gradient(180deg, rgba(var(--accent-rgb),.34), rgba(var(--accent-rgb),.12));
  color:var(--text);
  font-weight:900;
  border-radius:16px;
  padding:12px 14px;
  cursor:pointer;
}
.btn:hover{filter:brightness(1.06)}
.btn.ghost{
  background:rgba(255,255,255,.04);
  border-color:var(--line);
}
.btn.danger{
  border-color:rgba(255,90,107,.45);
  background:linear-gradient(180deg, rgba(255,90,107,.28), rgba(255,90,107,.12));
}

.chip{
  transition: transform 180ms cubic-bezier(.22,1,.36,1), filter 220ms cubic-bezier(.22,1,.36,1), background 260ms cubic-bezier(.22,1,.36,1), border-color 260ms cubic-bezier(.22,1,.36,1), box-shadow 260ms cubic-bezier(.22,1,.36,1);
  will-change: transform;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  color:var(--text);
  padding:8px 12px;
  font-weight:800;
  cursor:pointer;
}
.chip.mini{
  padding:6px 10px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.2px;
}
.chip.danger{border-color:rgba(255,90,107,.35); color:#ffd6db;}
.chip:hover{filter:brightness(1.05)}
.chip.active{
  border-color:rgba(var(--accent-rgb),.45);
  background:rgba(var(--accent-rgb),.14);
}


.price-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
}
.price-left{min-width:0;}
.price-right{text-align:right;}
.price-lines{display:flex; flex-direction:column; gap:4px; font-size:13px;}

.list{display:flex; flex-direction:column; gap:10px;}
.list.small{gap:8px;}

.market-more-wrap{display:flex; justify-content:center; margin:10px 0 6px;}
.market-more-wrap #m-more{width:100%; max-width:260px;}

/* Auctions */
.auction-wrap{overflow:hidden;}
.auction-card{
  border:1px solid rgba(255, 204, 0, 0.25);
  background: linear-gradient(180deg, rgba(255, 204, 0, 0.08), rgba(255, 204, 0, 0.02));
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.auction-card .r-title{flex-wrap:wrap; gap:8px;}
.auction-card .badge{white-space:nowrap;}

.muted{color:var(--muted);}
.hint{color:var(--muted); font-size:12px; margin-top:6px;}

/* More vivid secondary text in normal mode (lite stays as-is) */
body:not(.lite-mode) .muted,
body:not(.lite-mode) .hint{
  color: rgba(242,242,245,.80);
}
body:not(.lite-mode) .hint{
  font-weight: 600;
  letter-spacing: .15px;
}

.profile{display:flex; gap:12px; align-items:center;}
.avatar{
  width:46px; height:46px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(var(--accent-rgb),.22), rgba(255,255,255,.05));
  border:1px solid rgba(var(--accent-rgb),.25);
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
}
.avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
  display:block;
}
.avatar .hidden{display:none;}
.avatar.has-img{
  background:none;
  padding:0;
}
.avatar .avatar-letter{line-height:1;}
.avatar.small{width:40px; height:40px; border-radius:14px;}

.pname{font-size:18px; font-weight:900;}
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  font-weight:900;
  margin-top:6px;
}
.badge.admin{border-color:rgba(var(--accent-rgb),.35);}

.prefs{display:flex; flex-direction:column; gap:10px;}
.toggle{display:flex; gap:10px; align-items:center; font-weight:800;}
.toggle input{width:18px; height:18px;}

.filters{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.filters .input{min-width:200px;}

.stats{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;}
.stat{
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  padding:10px 12px;
  border-radius:16px;
  font-weight:900;
}
.stat small{display:block; color:var(--muted); font-weight:800; margin-top:4px;}

.report,.user-row{
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:var(--r2);
  padding:12px;
}
.r-top{display:flex; justify-content:space-between; gap:10px; align-items:flex-start;}
.r-title{font-weight:900;}
.r-meta{color:var(--muted); font-size:12px; margin-top:4px;}

/* Mini reaction counters in search */
.r-reacts{margin-top:4px; font-size:12px; opacity:.85; line-height:1.2; display:flex; flex-wrap:wrap; gap:6px;}
.mini-react{display:inline-flex; align-items:center; gap:4px; padding:2px 6px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);}
.r-text{color:rgba(242,242,245,.9); font-size:13px; line-height:1.35; margin-top:8px; white-space:pre-wrap;}

.status{
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
}
.status.pending{color:#ffd6a6; border-color:rgba(255,214,166,.25)}
.status.approved{color:#c9ffe9; border-color:rgba(56,211,159,.25)}
.status.rejected{color:#ffd6db; border-color:rgba(255,90,107,.25)}
.status.revision{color:#d7d7ff; border-color:rgba(160,160,255,.25)}

.thumbs{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin-top:10px;}
.thumb{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
  background:rgba(0,0,0,.25);
  cursor:pointer;
}
.thumb img{width:100%; height:86px; object-fit:cover; display:block;}
.thumb .file{
  height:86px;
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
  color:var(--muted);
}

.actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.actions .chip{padding:8px 10px;}

.modal{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:50;}
.modal.hidden{display:none;}
.modal-bg{position:absolute; inset:0; background:rgba(0,0,0,.65);}
.modal-card{
  position:relative;
  width:min(980px, calc(100% - 24px));
  max-height:calc(100% - 24px);
  overflow:hidden;
  background:rgba(18,18,26,.92);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
  padding:12px;
}
.modal-top{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 6px 10px;}
.modal-title{font-weight:900;}
.modal-body{display:grid; grid-template-columns:48px 1fr 48px; gap:10px; align-items:center;}
.viewer{height:min(62vh, 520px); border-radius:18px; border:1px solid var(--line); background:rgba(0,0,0,.25); overflow:hidden; display:flex; align-items:center; justify-content:center;}
.viewer img, .viewer video{max-width:100%; max-height:100%; display:block;}
.nav{
  height:44px; width:44px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  font-weight:900;
  font-size:22px;
  cursor:pointer;
}
.modal-foot{display:flex; gap:6px; justify-content:center; padding:10px 6px 4px; flex-wrap:wrap;}
.dot{width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.2); border:1px solid var(--line);}
.dot.active{background:rgba(var(--accent-rgb),.6); border-color:rgba(var(--accent-rgb),.5)}

.bulk-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; padding:6px;}
@media(max-width:820px){.bulk-grid{grid-template-columns:1fr;}}

.toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  padding:10px 14px;
  border-radius:999px;
  background:rgba(18,18,26,.92);
  border:1px solid rgba(255,255,255,.12);
  color:var(--text);
  box-shadow:var(--shadow);
  z-index:60;
  max-width:min(92vw, 620px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.toast.hidden{display:none;}


/* =========================
   Market badges
   ========================= */
.m-kind, .m-cat, .m-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  font-weight:900;
  font-size:12px;
  margin-left:6px;
  vertical-align:middle;
}
.m-kind{
  border-color:rgba(var(--accent-rgb),.35);
  color:var(--gold);
}
.m-cat{
  color:rgba(242,242,245,.82);
}
.m-badge{
  border-color:rgba(56,211,159,.25);
  color:#c9ffe9;
}
.m-price{ white-space:nowrap; }


/* ---- VIP highlight ---- */
.market.vip-silver{border:1px solid rgba(192,192,192,0.6);box-shadow:0 0 0 1px rgba(192,192,192,0.15),0 10px 30px rgba(0,0,0,0.25)}
.market.vip-gold{border:1px solid rgba(255,215,0,0.65);box-shadow:0 0 0 1px rgba(255,215,0,0.18),0 14px 38px rgba(0,0,0,0.28)}
.market.vip-silver::after,.market.vip-gold::after{content:'';position:absolute;inset:-1px;pointer-events:none;border-radius:18px;opacity:0.0}
.market.vip-silver{position:relative;overflow:hidden}
.market.vip-gold{position:relative;overflow:hidden}
@keyframes vipPulse{0%{opacity:0.0;transform:scale(0.98)}50%{opacity:0.55;transform:scale(1.01)}100%{opacity:0.0;transform:scale(0.98)}}
.market.vip-silver::after{background:radial-gradient(circle at 20% 10%, rgba(192,192,192,0.35), transparent 55%);animation:vipPulse 2.8s ease-in-out infinite}
.market.vip-gold::after{background:radial-gradient(circle at 20% 10%, rgba(255,215,0,0.45), transparent 55%);animation:vipPulse 2.2s ease-in-out infinite}
.vip-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:0.3px;margin-left:8px}
.vip-silver-badge{background:rgba(192,192,192,0.14);border:1px solid rgba(192,192,192,0.28)}
.vip-gold-badge{background:rgba(255,215,0,0.14);border:1px solid rgba(255,215,0,0.3)}


/* ---- VIP highlight (reports) ---- */
.report.vip-silver,.user-row.vip-silver{border:1px solid rgba(192,192,192,0.45);box-shadow:0 0 0 1px rgba(192,192,192,0.12),0 12px 34px rgba(0,0,0,0.25)}
.report.vip-gold,.user-row.vip-gold{border:1px solid rgba(255,215,0,0.55);box-shadow:0 0 0 1px rgba(255,215,0,0.14),0 14px 38px rgba(0,0,0,0.28)}
.report.vip-silver,.report.vip-gold,.user-row.vip-silver,.user-row.vip-gold{position:relative;overflow:hidden}
.report.vip-silver::after,.report.vip-gold::after,.user-row.vip-silver::after,.user-row.vip-gold::after{content:'';position:absolute;inset:-1px;pointer-events:none;border-radius:18px;opacity:0.0}
.report.vip-silver::after,.user-row.vip-silver::after{background:radial-gradient(circle at 25% 20%, rgba(192,192,192,0.18), transparent 55%);animation:vipPulse 3.0s ease-in-out infinite}
.report.vip-gold::after,.user-row.vip-gold::after{background:radial-gradient(circle at 25% 20%, rgba(255,215,0,0.20), transparent 55%);animation:vipPulse 2.4s ease-in-out infinite}

/* VIP list (admin) */
.vip-list{display:flex;flex-direction:column;gap:10px}
.vip-item{display:flex;align-items:center;gap:12px;padding:12px 12px;border-radius:18px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06)}
.vip-item.vip-silver{border-color:rgba(192,192,192,0.35)}
.vip-item.vip-gold{border-color:rgba(255,215,0,0.45)}
.vip-left{flex:1;min-width:0}
.vip-name{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vip-meta{margin-top:4px;opacity:0.85}

/* Calendar list */
.cal-item{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:16px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06)}
.cal-time{min-width:120px;font-weight:700}
.cal-title{font-weight:800}
.cal-desc{opacity:0.85;margin-top:4px;line-height:1.35}
.cal-actions{margin-left:auto;display:flex;gap:8px}

@media(max-width:520px){.row.wrap .input{min-width:0;}}


/* =========================
   Premium Visual Pack (v2)
   - matte gold live background
   - logo float
   - preloader shimmer/glow
   - tab/page transitions
   - ripple + haptic (JS)
   ========================= */

/* Live background light + dust (no transform animation here; JS parallax controls .bg transform)
   On Android Telegram WebView, constant blurred animations can cause micro-freezes,
   so we downshift them on touch devices.
*/
.bg{ will-change: transform; transform: translateZ(0) scale(1.02); }

.bg::before{
  content:"";
  position:absolute;
  inset:-25%;
  pointer-events:none;
  background:
    radial-gradient(40% 35% at 30% 25%, rgba(255,215,0,0.14), transparent 60%),
    radial-gradient(35% 30% at 70% 65%, rgba(255,190,0,0.10), transparent 62%),
    radial-gradient(30% 30% at 55% 45%, rgba(255,255,255,0.06), transparent 65%);
  filter: blur(22px);
  opacity: 0.85;
  animation: bgGlowDrift 10s ease-in-out infinite;
}

@keyframes bgGlowDrift{
  0%{ transform: translate3d(-1.5%, -1%, 0); }
  50%{ transform: translate3d(1.3%, 1.2%, 0); }
  100%{ transform: translate3d(-1.5%, -1%, 0); }
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,0.05) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 30%, rgba(255,215,0,0.06) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 70%, rgba(255,255,255,0.04) 0 1px, transparent 2px);
  background-size: 220px 220px, 260px 260px, 300px 300px;
  opacity: 0.32;
  filter: blur(0.2px);
  animation: dustMove 14s linear infinite;
  z-index: 0;
}

/* Mobile WebView performance: stop heavy blurred background animations */
@media (hover:none) and (pointer:coarse){
  .bg{ will-change: auto; }
  .bg::before{
    animation: none;
    filter: none;
    opacity: 0.38;
  }
  body::before{
    animation: none;
    filter: none;
    opacity: 0.16;
  }
  body.home-mode::before{ opacity: 0.10; }
  /* Logo float + big drop-shadow can stutter on some devices */
  .logo{ animation: none; filter: drop-shadow(0 8px 16px rgba(0,0,0,.45)); }
}
@keyframes dustMove{
  0%{ transform: translate3d(0,0,0); }
  100%{ transform: translate3d(-2%, 1.5%, 0); }
}

/* Logo float */
.logo{
  animation: logoFloat 3.4s ease-in-out infinite;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.55));
}
@keyframes logoFloat{
  0%,100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-2px) scale(1.02); filter: drop-shadow(0 14px 28px rgba(255,215,0,.12)); }
}
.logo:active{ transform: translateY(-1px) scale(.99); }

/* Preloader candy */
.preloader-shell::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background: radial-gradient(circle at 30% 20%, rgba(255,215,0,0.16), transparent 55%);
  opacity:0.9;
  filter: blur(18px);
  animation: plGlow 2.8s ease-in-out infinite;
}
@keyframes plGlow{
  0%,100%{ transform: translate3d(-1%, -1%, 0); opacity:0.75; }
  50%{ transform: translate3d(1.2%, 1.1%, 0); opacity:0.95; }
}
.preloader-bar-fill{ position: relative; overflow:hidden; }
.preloader-bar-fill::after{
  content:"";
  position:absolute;
  inset:0;
  transform: translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  animation: shimmer 1.15s linear infinite;
}
@keyframes shimmer{
  0%{ transform: translateX(-120%); }
  100%{ transform: translateX(120%); }
}
.preloader-art{ animation: artBob 2.6s ease-in-out infinite; }
@keyframes artBob{
  0%,100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-3px) scale(1.01); }
}

/* Page transitions (smooth but snappy)
   Avoid permanent `will-change` in Telegram Android WebView (can cause memory spikes + micro-jank).
   Enable it only while animating.
*/
.page{
  backface-visibility: hidden;
  transform: translateZ(0);
}
.page.is-entering, .page.is-leaving{
  will-change: transform, opacity;
}
.page.is-entering{ animation: pageIn .18s cubic-bezier(.2,.9,.2,1) both; }
.page.is-leaving{ animation: pageOut .14s cubic-bezier(.4,0,.2,1) both; }
@keyframes pageIn{
  from{ opacity:0; transform: translateY(3px) scale(.999); filter: blur(.6px); }
  to{ opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes pageOut{
  from{ opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
  to{ opacity:0; transform: translateY(-2px) scale(.999); filter: blur(.6px); }
}

/* Vivid transitions (disabled automatically by lite-mode/reduced-motion in JS/CSS) */
body:not(.lite-mode) .page.is-entering{ animation: pageInVivid .26s cubic-bezier(.16,1,.3,1) both; }
body:not(.lite-mode) .page.is-leaving{ animation: pageOutVivid .20s cubic-bezier(.4,0,.2,1) both; }
@keyframes pageInVivid{
  0%{ opacity:0; transform: translateY(10px) scale(.985); filter: blur(1.2px); }
  70%{ opacity:1; transform: translateY(-1px) scale(1.005); filter: blur(0); }
  100%{ opacity:1; transform: translateY(0) scale(1); }
}
@keyframes pageOutVivid{
  0%{ opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
  100%{ opacity:0; transform: translateY(-6px) scale(.99); filter: blur(1px); }
}

/* Mobile WebView performance: avoid animating `filter: blur()` (it can cause micro-freezes). */
@media (hover:none) and (pointer:coarse){
  @keyframes pageIn{
    from{ opacity:0; transform: translateY(3px) scale(.999); filter:none; }
    to{ opacity:1; transform: translateY(0) scale(1); filter:none; }
  }
  @keyframes pageOut{
    from{ opacity:1; transform: translateY(0) scale(1); filter:none; }
    to{ opacity:0; transform: translateY(-2px) scale(.999); filter:none; }
  }
  @keyframes pageInVivid{
    0%{ opacity:0; transform: translateY(10px) scale(.985); filter:none; }
    70%{ opacity:1; transform: translateY(-1px) scale(1.005); filter:none; }
    100%{ opacity:1; transform: translateY(0) scale(1); filter:none; }
  }
  @keyframes pageOutVivid{
    0%{ opacity:1; transform: translateY(0) scale(1); filter:none; }
    100%{ opacity:0; transform: translateY(-6px) scale(.99); filter:none; }
  }
}

/* Ripple */
.ripple{ position:relative; overflow:hidden; }
.ripple i{
  position:absolute;
  border-radius:999px;
  transform: translate(-50%,-50%);
  width: 12px;
  height: 12px;
  opacity: 0.22;
  background: rgba(255,215,0,0.45);
  animation: rip .70s cubic-bezier(.22,1,.36,1) forwards;
  pointer-events:none;
}
@keyframes rip{
  to{ width: 320px; height: 320px; opacity:0; }
}

/* Home (vivid) micro-animations */
@keyframes homeEmojiBob{
  0%,100%{ transform: translateY(0) rotate(0deg) scale(1); }
  50%{ transform: translateY(-2px) rotate(-2deg) scale(1.02); }
}
@keyframes homeCardGlow{
  0%,100%{ opacity:.34; filter: blur(12px); }
  50%{ opacity:.52; filter: blur(14px); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .bg::before, body::before, .logo, .preloader-shell::before, .preloader-bar-fill::after, .preloader-art,
  .page.is-entering, .page.is-leaving{ animation: none !important; }
}


/* ===== Main menu (Home) ===== */
.top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.iconbtn{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(16,16,22,.45);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), background .18s ease, border-color .18s ease, filter .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.iconbtn:active{ transform: scale(.985); }

body:not(.lite-mode) .iconbtn{
  border-color: rgba(255,255,255,.14);
  background:
    linear-gradient(135deg, rgba(var(--accent2-rgb), .22), rgba(var(--hot-rgb), .18)),
    rgba(16,16,22,.45);
  box-shadow: 0 14px 44px rgba(0,0,0,.38);
}
body:not(.lite-mode) .iconbtn:hover{
  border-color: rgba(var(--accent-rgb), .32);
  filter: saturate(1.05) brightness(1.02);
}
body.home-mode .tabs-wrap{ display:none; }
body.home-mode #home-btn{ filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)); }

/* different background under Home menu */
body.home-mode .bg{
  /*
    Главное меню: отдельный фон (menu_background.png).
    Фолбэк вторым слоем: обычный background.png, чтобы не было
    «чёрного» фона, если menu_background.png отсутствует.
  */
  background-image:
    url('/static/menu_background.png?v=20260202_vip25'),
    url('/static/background.png?v=20260202_vip25');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* Filters look nice but can stutter on some Android WebViews */
  filter: saturate(1.08) contrast(1.06) brightness(1.02);
  transform: scale(1.03);
}

/* Mobile WebView performance: reduce expensive filters on the main menu background */
@media (hover:none) and (pointer:coarse){
  body.home-mode .bg{
    filter: none;
    transform: scale(1.02);
  }
}

/* Home layout */
#page-home{
  padding-top: 6px;
}

body.home-mode .bg:after{
  /* lighter overlay on main menu so background isn't black */
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(0,0,0,.08), rgba(0,0,0,.42)),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.38));
}
.home-hero{
  margin: 6px 4px 10px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.32));
  /* blur looks nice but is expensive on some Android WebViews */
  backdrop-filter: blur(10px);
}

@media (hover:none) and (pointer:coarse){
  .home-hero{
    backdrop-filter: none;
  }
}
.home-title{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .2px;
}
.home-sub{
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}
.home-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 10px 4px 0;
}
.home-card{
  text-align: left;
  border-radius: 18px;
  padding: 14px 14px;
  border: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(180deg, rgba(20,20,28,.72), rgba(16,16,22,.60));
  color: var(--text);
  cursor: pointer;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), border-color .18s ease, background .18s ease, filter .18s ease;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}
.home-card::before{
  content:"";
  position:absolute;
  inset:-18%;
  background: radial-gradient(40% 35% at 30% 20%, rgba(255,215,0,.12), transparent 65%);
  opacity:.9;
  filter: blur(14px);
  transform: translate3d(-2%, -2%, 0);
  transition: opacity .18s ease;
  pointer-events:none;
}

@media (hover:none) and (pointer:coarse){
  /* Reduce blur layers on mobile (major source of micro-freezes) */
  .home-card::before{ filter:none; opacity:.55; }
  body:not(.lite-mode) .home-card{
    /* keep depth but cheaper shadow */
    box-shadow: 0 10px 24px rgba(0,0,0,.32);
  }
  body:not(.lite-mode) .iconbtn{ box-shadow: none; }
}
.home-card:active{ transform: scale(.992); }
.home-card:active::before{ opacity: 1; }
.hc-emoji{ font-size: 20px; }
.hc-title{ margin-top: 8px; font-weight: 800; font-size: 14px; }
.hc-sub{ margin-top: 4px; color: var(--muted); font-size: 12px; }

/* ===== Main menu (Home) — vivid mode only (lite-mode keeps current look) ===== */
body:not(.lite-mode) .home-title{
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--hot));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 10px 28px rgba(0,0,0,.35);
}
body:not(.lite-mode) .home-sub{
  color: rgba(242,242,245,.78);
}
body:not(.lite-mode) .home-card{
  border-color: rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(34, 24, 60, .56), rgba(20, 20, 28, .54));
  box-shadow:
    0 18px 60px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.05) inset;
  transform: translateZ(0);
}

/* ===== Games ===== */
.slot-reels{
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:center;
  margin-top:10px;
}
.slot-reel{
  width:54px;
  height:54px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(22,22,32,.72), rgba(14,14,20,.54));
  box-shadow: 0 12px 36px rgba(0,0,0,.28);
}
body.lite-mode .slot-reel{
  box-shadow:none;
  background: rgba(255,255,255,.06);
}
body:not(.lite-mode) .home-card::before{
  background:
    radial-gradient(40% 35% at 18% 16%, rgba(var(--accent-rgb), .18), transparent 65%),
    radial-gradient(38% 32% at 82% 10%, rgba(var(--accent2-rgb), .18), transparent 70%),
    radial-gradient(44% 36% at 70% 80%, rgba(var(--hot-rgb), .12), transparent 70%);
  opacity: 1;
}
body:not(.lite-mode) .home-card::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 20px;
  background: linear-gradient(120deg, rgba(var(--accent-rgb), .85), rgba(var(--accent2-rgb), .75), rgba(var(--hot-rgb), .75));
  opacity:.38;
  filter: blur(12px);
  transform: translateZ(0);
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  /* Infinite glow is красивый, но на некоторых телефонах даёт лаги.
     Включаем анимацию только на устройствах с hover (обычно ПК). */
}
body:not(.lite-mode) .home-card:hover{
  border-color: rgba(var(--accent-rgb), .38);
  transform: translateY(-2px) scale(1.01);
}
body:not(.lite-mode) .home-card:hover::after{
  opacity: .55;
  transform: translateY(-1px);
}
body:not(.lite-mode) .home-card:active{
  transform: translateY(0) scale(.992);
}
body:not(.lite-mode) .hc-emoji{
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.30));
}
body:not(.lite-mode) .hc-title{
  letter-spacing: .2px;
  text-shadow: 0 10px 22px rgba(0,0,0,.35);
  background: linear-gradient(90deg, rgba(255,255,255,1), rgba(var(--accent-rgb),.95), rgba(var(--accent2-rgb),.92), rgba(255,255,255,1));
  background-size: 260% 260%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Enable heavier home animations only on devices where it's usually smooth (desktop) */
@media (hover:hover) and (pointer:fine){
  body:not(.lite-mode) .home-card::after{ animation: homeCardGlow 4.6s ease-in-out infinite; }
  body:not(.lite-mode) .hc-emoji{ animation: homeEmojiBob 2.2s ease-in-out infinite; }
  body:not(.lite-mode) .hc-title{ animation: gradientShift 9s ease-in-out infinite; }
}

/* When user is in main menu, also reduce expensive blur/shadows a bit */
body.home-mode .top{ backdrop-filter:none; }
body.home-mode .home-hero{ backdrop-filter:none; }

/* Main menu on mobile: remove the heaviest blur layers (they often cause micro-freezes) */
@media (hover:none) and (pointer:coarse){
  body:not(.lite-mode) .home-card{
    box-shadow: 0 9px 18px rgba(0,0,0,.28);
    transform: none;
  }
  body:not(.lite-mode) .home-card::after{ display:none; }
  body:not(.lite-mode) .hc-emoji{ filter:none; }
}
body:not(.lite-mode) .hc-sub{
  color: rgba(242,242,245,.80);
}
body:not(.lite-mode) .home-card.locked{
  filter: saturate(.92) grayscale(.12);
  opacity: .88;
}
@keyframes homeEmojiBob{
  0%,100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-2px) scale(1.02); }
}

/* Locked home cards (e.g. VIP for non-VIP users) */
.home-card.locked{ filter: grayscale(.25); opacity: .82; }
.home-card.locked::before{ opacity: .55; }
.hc-lock{
  position:absolute;
  top:10px;
  right:10px;
  display:none;
  font-size:18px;
  opacity:.95;
  pointer-events:none;
}
.home-card.locked .hc-lock{ display:block; }
.home-footnote{
  margin: 12px 6px 0;
  color: rgba(242,242,245,.62);
  font-size: 12px;
}
@media (max-width: 360px){
  .home-grid{ grid-template-columns: 1fr; }
}


/* Home-only header buttons */
.home-only{ display:none; }
body.home-mode .home-only{ display:inline-flex; }

.iconbtn svg{ width:18px; height:18px; display:block; }
.iconbtn.icon-link{ gap:8px; }

.iconbtn svg{ fill: currentColor; }


/* =========================
   Mini-orlenok assistant (compact)
   ========================= */
.orlenok{position:fixed;right:12px;bottom:74px;z-index:70;max-width:min(280px, calc(100vw - 24px));pointer-events:none;padding-bottom:56px;}
.orlenok.hidden{display:none;}

.orlenok-bubble{
  pointer-events:auto;
  background:rgba(18,18,26,.90);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(14px);
  border-radius:18px;
  box-shadow:0 16px 54px rgba(0,0,0,.55);
  padding:10px 10px 10px 12px;
  position:relative;
}

.orlenok-bubble::after{
  content:"";
  position:absolute;
  right:30px;
  bottom:-10px;
  width:14px;
  height:14px;
  background:rgba(18,18,26,.90);
  border-right:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
  transform:rotate(45deg);
  border-bottom-right-radius:4px;
}

.orlenok-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;}
.orlenok-kind{font-weight:950;letter-spacing:.2px;font-size:12px;opacity:.92;}
.orlenok-ctrl{display:flex;gap:6px;}
.orlenok-mini{
  pointer-events:auto;
  width:28px;height:28px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 10px 22px rgba(0,0,0,.30);
}
.orlenok-mini:active{transform:scale(.98)}

.orlenok-text{font-size:12.5px;line-height:1.35;color:rgba(242,242,245,.92);white-space:pre-wrap;}

.orlenok-tabs{margin-top:8px;display:flex;align-items:center;gap:8px;font-size:12px;}
.orlenok-tab{
  pointer-events:auto;
  border:none;background:transparent;
  color:rgba(255,255,255,.78);
  font-weight:800;
  padding:0;
}
.orlenok-tab.active{color:rgba(255,255,255,.95);}
.orlenok-sep{opacity:.40;}

.orlenok-avatar{
  pointer-events:auto;
  position:absolute;
  right:8px;
  bottom:-56px;
  width:44px;height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:radial-gradient(80% 80% at 35% 25%, rgba(255,255,255,.18), rgba(0,0,0,.12));
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
}

/* Tap reactions */
.orlenok-avatar:active{transform:translateY(-2px) scale(.98);}
.orlenok-avatar.poke{animation:orlenokPoke .55s ease-out 1 !important;}
.orlenok-bubble.pop{animation:orlenokPop .35s ease-out 1;}

@keyframes orlenokPoke{
  0%{transform:translateY(0) rotate(0deg) scale(1);}
  25%{transform:translateY(-7px) rotate(-6deg) scale(1.04);}
  55%{transform:translateY(1px) rotate(6deg) scale(.98);}
  100%{transform:translateY(0) rotate(0deg) scale(1);}
}

@keyframes orlenokPop{
  0%{transform:translateY(4px) scale(.98);opacity:.0;}
  100%{transform:translateY(0) scale(1);opacity:1;}
}


.orlenok-img{width:44px;height:44px;display:block;object-fit:contain;transform:translateY(1px) scale(1.02);filter:drop-shadow(0 10px 18px rgba(0,0,0,.38));}

/* Idle animation (cheap, smooth). Disabled in lite-mode and for reduced motion */
.orlenok-avatar{animation:orlenokBob 3.2s ease-in-out infinite;transform-origin:65% 85%;overflow:hidden;}
.orlenok-avatar::before{content:"";position:absolute;inset:-14px;border-radius:999px;background:radial-gradient(closest-side, rgba(255,216,102,.55), rgba(255,216,102,0) 70%);opacity:.65;filter:blur(2px);animation:orlenokGlow 2.4s ease-in-out infinite;pointer-events:none;}

@keyframes orlenokBob{
  0%{transform:translateY(0) rotate(0deg);}
  35%{transform:translateY(-3px) rotate(-1.2deg);}
  70%{transform:translateY(0) rotate(0.8deg);}
  100%{transform:translateY(0) rotate(0deg);}
}

@keyframes orlenokGlow{
  0%{opacity:.55;transform:scale(.95);}
  50%{opacity:.9;transform:scale(1.05);}
  100%{opacity:.55;transform:scale(.95);}
}

body.lite-mode .orlenok-avatar{animation:none;}
body.lite-mode .orlenok-avatar::before{animation:none;opacity:.35;}

@media (prefers-reduced-motion: reduce){
  .orlenok-avatar{animation:none;}
  .orlenok-avatar::before{animation:none;}
}
.orlenok-svg{width:30px;height:30px;display:block;}

body.theme-light .orlenok-bubble{background:rgba(255,255,255,.86);border:1px solid rgba(0,0,0,.08);}
body.theme-light .orlenok-bubble::after{background:rgba(255,255,255,.86);border-right:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.06);}
body.theme-light .orlenok-text{color:rgba(11,11,15,.88);}
body.theme-light .orlenok-kind{color:rgba(11,11,15,.85);}
body.theme-light .orlenok-mini{border:1px solid rgba(0,0,0,.10);background:rgba(0,0,0,.04);color:rgba(11,11,15,.84);}
body.theme-light .orlenok-tab{color:rgba(11,11,15,.72);}
body.theme-light .orlenok-tab.active{color:rgba(11,11,15,.92);}

/* Online dot */
.online-dot{display:inline-block;width:10px;height:10px;border-radius:999px;margin-right:8px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.22);box-shadow:0 0 0 2px rgba(0,0,0,.25) inset;}
.online-dot.on{background:rgba(56,211,159,.85);border-color:rgba(56,211,159,.55);}

/* Theme support */
body.theme-light{
  --bg:#f5f6fb;
  --card:rgba(255,255,255,.82);
  --card2:rgba(245,246,252,.9);
  --text:#0b0b0f;
  --muted:rgba(11,11,15,.64);
  --line:rgba(0,0,0,.08);
  --shadow:0 14px 40px rgba(0,0,0,.12);
}
body.theme-light .bg:after{
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.60), rgba(0,0,0,.08)),
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(0,0,0,.10));
}

/* Lite mode: minimize animations/effects */
body.lite-mode .bg::before,
body.lite-mode::before,
body.lite-mode .logo,
body.lite-mode .preloader-shell::before,
body.lite-mode .preloader-bar-fill::after,
body.lite-mode .preloader-art,
body.lite-mode .page.is-entering,
body.lite-mode .page.is-leaving{animation:none !important;}
body.lite-mode .tab,
body.lite-mode .btn,
body.lite-mode .chip{
  /* Lite-mode: keep UI responsive, but cheaper (no long/complex transitions) */
  transition: transform 120ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease, filter 160ms ease;
}
body.lite-mode .bg{filter:saturate(1.02) contrast(1.02) !important;}


/* === FIX: Orlenok as character, not avatar === */
.orlenok-avatar,
.orlenok-btn,
.orlenok-img {
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.orlenok-img {
    width: 56px;
    height: auto;
    pointer-events: none;
}

/* subtle idle animation (character-like) */
@keyframes orlenokFloat {
    0% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}

.orlenok-img {
    animation: orlenokFloat 3.5s ease-in-out infinite;
}

body.lite-mode .orlenok-img {
    animation: none;
}



/* === Orlenok: character (transparent PNG), sits outside bubble === */
#orlenokWidget { 
  pointer-events: none;  /* let UI clicks pass through */
}
#orlenokWidget .orlenok-bubble, 
#orlenokWidget .orlenok-controls,
#orlenokWidget button { 
  pointer-events: auto;  /* bubble/buttons still clickable */
}

/* Button that holds the character */
.orlenok-btn, .orlenok-avatar { 
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  width: 72px !important;
  height: 72px !important;
  padding: 0 !important;
}

/* The PNG itself */
.orlenok-img {
  width: 72px !important;
  height: 72px !important;
  border-radius: 0 !important;
  display: block;
  transform-origin: 60% 85%;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.35));
  animation: orl_bob 3.2s ease-in-out infinite, orl_squash 6.4s ease-in-out infinite;
  pointer-events: none;
}

/* Make the character overlap the bubble a bit */
#orlenokWidget { 
  right: 10px !important;
  bottom: 72px !important;
}
#orlenokWidget .orlenok-bubble {
  margin-right: 58px !important;
}
.orlenok-btn {
  position: absolute !important;
  right: 8px !important;
  bottom: 6px !important;
}

/* Idle animations */
@keyframes orl_bob {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(-1.2deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
@keyframes orl_squash {
  0%, 92%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  94% { transform: translateY(1px) rotate(0.8deg) scale(1.02, .98); }
  96% { transform: translateY(-5px) rotate(-1deg) scale(.98, 1.02); }
}

/* Respect lite-mode / reduced motion */
body.lite-mode .orlenok-img { animation: none !important; filter: none !important; }
@media (prefers-reduced-motion: reduce) { .orlenok-img { animation: none !important; } }


/* Lite-mode: cheaper shadows */
body.lite-mode .card{ box-shadow: 0 10px 28px rgba(0,0,0,.38); }
body.lite-mode .top{ box-shadow: 0 12px 34px rgba(0,0,0,.42); }

/* --- Search: faction hint --- */
.faction{ opacity: .92; }

/* --- Profile reactions --- */
.reactions{ margin: 0; }
.react-stats{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.react-pill{ padding:6px 10px; border:1px solid rgba(255,255,255,0.12); border-radius:999px; font-size:12px; }
.react-btns{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.react-actions{ margin-top:10px; }

/* --- Market: mini reaction counters in ads --- */
.m-author{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.m-author-name{opacity:.92}
.m-author-link{background:transparent;border:0;padding:0;margin:0;opacity:.92;color:inherit;font:inherit;cursor:pointer}
.m-author-link:active{transform:scale(.98)}
.chip.mini{padding:6px 10px;font-size:12px;line-height:1}
.m-react-mini{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.m-react-pill{display:inline-flex;gap:6px;align-items:center;padding:4px 10px;border:1px solid rgba(255,255,255,0.12);border-radius:999px;font-size:12px;opacity:.95}
.m-react-pill b{font-weight:700}
.react-chooser{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:flex-end; justify-content:center; z-index:9999; padding:14px; }
.react-chooser.hidden{ display:none; }
.react-chooser-card{ width:100%; max-width:520px; background:var(--card); border:1px solid var(--border); border-radius:18px; padding:14px; box-shadow:0 20px 50px rgba(0,0,0,.4); }
.react-opts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.react-opt{ font-size:20px; padding:10px 14px; border-radius:14px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.04); }
.react-opt.active{ border-color:rgba(255,255,255,0.35); background:rgba(255,255,255,0.08); }
.chip.react.active{ outline:2px solid rgba(247,213,107,0.65); }

/* --- VIP avatar frames --- */
.avatar.vip-silver-frame{ box-shadow: 0 0 0 2px rgba(192,192,192,0.95); }
.avatar.vip-gold-frame{ box-shadow: 0 0 0 2px rgba(212,175,55,0.95); }
.avatar.small.vip-silver-frame{ box-shadow: 0 0 0 2px rgba(192,192,192,0.95); }
.avatar.small.vip-gold-frame{ box-shadow: 0 0 0 2px rgba(212,175,55,0.95); }

/* --- Users search: Badoo-like cards --- */
#u-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
@media(max-width:420px){#u-results{grid-template-columns:1fr;}}
#u-results .user-row{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:12px;border-radius:18px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);} 
#u-results .user-row .profile{width:100%;}
#u-results .user-row .avatar.small{width:56px;height:56px;border-radius:16px;}
#u-results .user-row .r-meta{opacity:.85;font-size:.85rem;line-height:1.2}
#u-results .user-row .chip{align-self:stretch;justify-content:center;}

/* Market view switch chips should not stretch */
#page-market .row.wrap > .chip{flex:0 0 auto;}


/* Badoo-like user search cards */
.badoo-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
@media (min-width: 520px){
  .badoo-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.badoo-card{
  background: rgba(20,20,26,.55);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 12px 10px 10px;
  text-align:center;
  cursor:pointer;
  user-select:none;
  transition: transform .08s ease;
}
.badoo-card:active{ transform: scale(.98); }
.badoo-avatar{
  width:72px;
  height:72px;
  border-radius: 999px;
  margin: 2px auto 10px;
  background: rgba(255,255,255,.10);
  background-size: cover;
  background-position: center;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  font-size: 26px;
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.10);
}
.badoo-name{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.15;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.badoo-username{
  font-size: 12px;
  opacity: .75;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.online-dot{
  width:8px;
  height:8px;
  border-radius: 50%;
  background: #23d160;
  box-shadow: 0 0 0 2px rgba(35,209,96,.18);
  flex: 0 0 auto;
}

/* ---------------- AUCTIONS (more colorful) ---------------- */
#market-view-auctions .card{
  border: 1px solid rgba(255,204,0,.18);
  background: linear-gradient(180deg, rgba(255,204,0,.07), rgba(0,0,0,.30));
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
}
#auction-list .card{ margin-top: 12px; }
#auction-list .a-head{
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#auction-list .a-head .pill{
  border: 1px solid rgba(255,204,0,.22);
  background: rgba(0,0,0,.22);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 800;
  letter-spacing: .2px;
}
#auction-list .a-body{ margin-top: 8px; }
#auction-list .a-body b{ color: rgba(255, 224, 128, 0.95); }
#auction-list .row{ display:flex; gap:10px; flex-wrap: wrap; }
#auction-list .row .muted{ opacity: .75; }
#market-view-auctions .btn.primary{
  box-shadow: 0 10px 22px rgba(255,204,0,.12);
}

/* ---------------- VIP cosmetics inputs ---------------- */
.vip-cos-tabs{
  display:flex;
  gap:10px;
  margin: 6px 0 10px;
}

.vip-cos-tab{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:10px 8px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  letter-spacing: .2px;
  transition: transform .18s ease, filter .18s ease, background .18s ease, box-shadow .18s ease;
}
.vip-cos-tab .vct-ico{ font-size: 20px; line-height: 1; }
.vip-cos-tab .vct-txt{ font-size: 12px; opacity: .92; }

body:not(.lite-mode) .vip-cos-tab{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
}
body:not(.lite-mode) .vip-cos-tab:active{ transform: translateY(1px) scale(.99); }
body:not(.lite-mode) .vip-cos-tab:hover{ filter: brightness(1.06); }

.vip-cos-tab.active{
  border-color: rgba(var(--accent-rgb), .70);
}
body:not(.lite-mode) .vip-cos-tab.active{
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.34), rgba(var(--accent2-rgb),.30));
  box-shadow: 0 10px 22px rgba(0,0,0,.22), 0 0 18px rgba(var(--accent2-rgb),.22);
}

.vip-cos-panels{ margin-top: 6px; }
.vip-cos-panel.hidden{ display:none !important; }

.vip-cos-row{
  display:flex;
  align-items:center;
  gap: 10px;
  margin: 10px 0 12px;
}
.vip-color{
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.25);
  padding: 0;
}
.vip-color-text{ flex: 1; }

/* -------------------------------------------------
   Custom cosmetics (DP / VIP): card bg/border/badge
   ------------------------------------------------- */
.custom-badge{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  line-height:1;
  margin-top:6px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
}

.badoo-custom-badge{
  display:inline-block;
  padding:2px 7px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  line-height:1;
  margin-top:6px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  max-width: 100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


/* Card background choices (predefined images) */
.bg-choices{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-start;
}
.bg-choice{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:8px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  cursor:pointer;
  user-select:none;
}
.bg-choice input{ margin:0; }
.bg-thumb{
  width:110px;
  height:70px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.bg-choice input:checked ~ .bg-thumb{
  outline:2px solid rgba(255,255,255,.55);
  outline-offset:2px;
}
.bg-name{
  font-size:12px;
  opacity:.9;
}
.vip-bg-choices{ margin:8px 0 12px; }


/* ---------------------------
   Games UI: bets + animations
--------------------------- */
.bet-grid{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.bet-chip{
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  padding:6px 9px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.bet-chip:hover{ transform: translateY(-1px) scale(1.01); }
.bet-chip.active{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.35);
}
.bet-chip.red.active{ border-color: rgba(255,80,80,.8); }
.bet-chip.black.active{ border-color: rgba(80,80,80,.9); }
.bet-chip.red{ box-shadow: inset 0 0 0 999px rgba(255,0,0,.04); }
.bet-chip.black{ box-shadow: inset 0 0 0 999px rgba(0,0,0,.18); }

.roulette-board{ display:flex; flex-direction:column; gap:8px; }
.roulette-display{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:6px 0 0;
}
.roulette-wheel{
  width:64px; height:64px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.18);
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.roulette-wheel::before{
  content:"";
  position:absolute; inset:-8px;
  background: conic-gradient(
    rgba(255,255,255,.14) 0 20deg,
    rgba(255,0,0,.10) 20deg 40deg,
    rgba(0,0,0,.18) 40deg 60deg,
    rgba(255,255,255,.08) 60deg 80deg,
    rgba(255,0,0,.10) 80deg 100deg,
    rgba(0,0,0,.18) 100deg 120deg,
    rgba(255,255,255,.12) 120deg 140deg,
    rgba(255,0,0,.10) 140deg 160deg,
    rgba(0,0,0,.18) 160deg 180deg,
    rgba(255,255,255,.12) 180deg 200deg,
    rgba(255,0,0,.10) 200deg 220deg,
    rgba(0,0,0,.18) 220deg 240deg,
    rgba(255,255,255,.12) 240deg 260deg,
    rgba(255,0,0,.10) 260deg 280deg,
    rgba(0,0,0,.18) 280deg 300deg,
    rgba(255,255,255,.12) 300deg 320deg,
    rgba(255,0,0,.10) 320deg 340deg,
    rgba(0,0,0,.18) 340deg 360deg
  );
  filter: blur(.2px);
}
.roulette-wheel.spinning::before{
  animation: roulSpin .85s linear infinite;
}
@keyframes roulSpin { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }

.roulette-wheel::after{
  content:"";
  position:absolute;
  top:-6px; left:50%;
  transform: translateX(-50%);
  width:0; height:0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 10px solid rgba(255,255,255,.85);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.35));
}

.adv-bets .chip{ padding: 8px 10px; }
.roulette-table-wrap{ margin-top:10px; }
.roulette-table{
  display:grid;
  grid-template-columns: 44px repeat(3, 1fr);
  gap:6px;
  user-select:none;
}
.rt-zero{
  grid-row: 1 / span 12;
  display:flex; align-items:center; justify-content:center;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,255,120,.08);
  font-weight: 900;
}
.rt-cell{
  height:34px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.14);
  display:flex; align-items:center; justify-content:center;
  font-weight: 800;
  background: rgba(255,255,255,.06);
  transition: transform .08s ease, box-shadow .08s ease;
}
.rt-cell.red{ background: rgba(255,0,0,.08); }
.rt-cell.black{ background: rgba(0,0,0,.22); }
.rt-cell:active{ transform: scale(.98); }
.rt-cell.selected{
  box-shadow: 0 0 0 2px rgba(255,255,255,.5), 0 10px 24px rgba(0,0,0,.25);
}

.roulette-outcome{
  min-width: 56px;
  text-align:center;
  font-weight: 800;
  font-size: 16px;
  padding: 6px 9px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}
.roulette-outcome.red{ box-shadow: inset 0 0 0 999px rgba(255,0,0,.08); }
.roulette-outcome.black{ box-shadow: inset 0 0 0 999px rgba(0,0,0,.22); }
.roulette-outcome.green{ box-shadow: inset 0 0 0 999px rgba(0,255,120,.08); }

/* roulette pointer */
.roulette-wheel::after{
  content:"";
  position:absolute;
  top:-2px; left:50%;
  width:0; height:0;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 10px solid rgba(255,255,255,.85);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.35));
}

/* advanced roulette table */
.roulette-table-wrap{ margin-top:8px; }
.roulette-table{
  display:grid;
  grid-template-columns: 30px repeat(3, 1fr);
  gap:5px;
  align-items:stretch;
  margin-top:8px;
}
.rt-zero{
  grid-row: 1 / span 12;
  grid-column: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,255,120,.10);
  font-weight: 900;
  cursor:pointer;
  user-select:none;
}
.rt-num{
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  padding:8px 0;
  font-weight: 900;
  font-size: 12px;
  cursor:pointer;
  user-select:none;
}
.rt-num.red{ background: rgba(255,0,0,.10); }
.rt-num.black{ background: rgba(0,0,0,.22); }
.rt-num.selected{
  outline: 2px solid rgba(255,255,255,.65);
  box-shadow: 0 0 0 6px rgba(255,255,255,.10);
}
.adv-bets .chip.active{
  border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.12);
}

/* Make roulette chips more compact / easier to tap */
.game-panel[data-game="roulette"] .bet-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:6px;
}
.game-panel[data-game="roulette"] .bet-chip{
  width:100%;
  text-align:center;
  padding:7px 8px;
}

/* Win FX: flash + confetti */
.fx-layer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}
.fx-flash{
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%);
  animation: fxFlash .55s ease-out forwards;
}
@keyframes fxFlash{
  0%{ opacity: 0; transform: scale(.96); }
  25%{ opacity: 1; transform: scale(1); }
  100%{ opacity: 0; transform: scale(1.04); }
}
.fx-confetti{
  position: absolute;
  top: -20px;
  width: 9px;
  height: 14px;
  border-radius: 3px;
  opacity: .95;
  background: hsl(var(--h) 92% 62%);
  transform: translate3d(0,0,0) rotate(0deg);
  animation: fxConfetti var(--d) cubic-bezier(.18,.62,.22,1) forwards;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.25));
}
@keyframes fxConfetti{
  0%{ transform: translate3d(0,0,0) rotate(0deg); opacity: .95; }
  100%{ transform: translate3d(var(--dx), 110vh, 0) rotate(720deg); opacity: 0; }
}

.slot-reels{ margin-top:12px; }
.slot-reel{
  transition: transform .12s ease;
}
.slot-reels.spinning .slot-reel{
  animation: slotJitter .18s ease-in-out infinite;
}
@keyframes slotJitter{
  0%{ transform: translateY(0); }
  50%{ transform: translateY(-2px); }
  100%{ transform: translateY(0); }
}
.slot-reel.pop{
  animation: slotPop .28s ease-out 1;
}
@keyframes slotPop{
  0%{ transform: scale(1); }
  60%{ transform: scale(1.12); }
  100%{ transform: scale(1); }
}


/* ---------------------------
   Games UI (v4)
---------------------------- */
.game-card{
  text-align:left;
  cursor:pointer;
  transition: transform 180ms cubic-bezier(.22,1,.36,1), filter 220ms cubic-bezier(.22,1,.36,1), box-shadow 220ms cubic-bezier(.22,1,.36,1);
}
.game-card:hover{
  transform: translateY(-2px) scale(1.01);
  filter: brightness(1.05);
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
}
.pill{
  margin-top:10px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(var(--accent-rgb),.35);
  background:rgba(var(--accent-rgb),.12);
  color: rgba(245,245,250,.95);
  font-weight:900;
  width:fit-content;
}

/* Result panels: colorful, not just text */
.result-panel{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  padding:10px 12px;
  color: rgba(245,245,250,.96);
  font-weight:800;
  letter-spacing:.15px;
  white-space:normal;
}
.result-panel .rp-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.result-panel .rp-title{font-size:14px; font-weight:950;}
.result-panel .rp-sub{margin-top:6px; font-size:12px; opacity:.9; font-weight:800;}
.result-panel .rp-delta{
  font-size:14px;
  font-weight:950;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  white-space:nowrap;
}
.result-panel .rp-unit{opacity:.8; font-weight:900;}
.result-panel .rp-bottom{margin-top:8px;}
.result-panel .rp-tags{display:flex; flex-wrap:wrap; gap:8px;}
.tag{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
  color: rgba(245,245,250,.95);
  font-weight:950;
  font-size:12px;
}
.tag.red{border-color:rgba(255,90,107,.42); background:rgba(255,90,107,.14); color:#ffe7ea;}
.tag.black{border-color:rgba(180,190,210,.35); background:rgba(20,24,34,.30);}
.tag.green{border-color:rgba(60,220,140,.35); background:rgba(60,220,140,.14); color:#e9fff4;}

.result-panel.win{
  border-color:rgba(60,220,140,.28);
  background:linear-gradient(180deg, rgba(60,220,140,.14), rgba(255,255,255,.03));
}
.result-panel.lose{
  border-color:rgba(255,90,107,.28);
  background:linear-gradient(180deg, rgba(255,90,107,.16), rgba(255,255,255,.03));
}
.result-panel.push{
  border-color:rgba(255,204,0,.22);
  background:linear-gradient(180deg, rgba(255,204,0,.12), rgba(255,255,255,.03));
}
.result-panel.info{
  border-color:rgba(var(--accent-rgb),.22);
  background:linear-gradient(180deg, rgba(var(--accent-rgb),.10), rgba(255,255,255,.03));
}
.result-panel.error{
  border-color:rgba(255,90,107,.35);
  background:linear-gradient(180deg, rgba(255,90,107,.22), rgba(0,0,0,.10));
}

/* Blackjack cards */
.bj-board{display:flex; flex-direction:column; gap:6px;}
.bj-label{
  display:flex; align-items:center; justify-content:space-between;
  font-weight:950;
  color: rgba(245,245,250,.96);
}
.bj-total{opacity:.85; font-weight:950;}
.bj-hand{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:8px 0 2px;
}

.bj-card{
  width:62px;
  height:88px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
  position:relative;
  overflow:hidden;
  animation: cardIn 180ms cubic-bezier(.22,1,.36,1);
}
@keyframes cardIn{
  from{ transform: translateY(6px) scale(.98); opacity:.0; }
  to{ transform: translateY(0) scale(1); opacity:1; }
}
.bj-card.red{
  border-color:rgba(255,90,107,.32);
  background:linear-gradient(180deg, rgba(255,90,107,.10), rgba(255,255,255,.04));
}
.bj-corner{
  position:absolute;
  font-weight:950;
  font-size:12px;
  line-height:1.05;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:8px;
}
.bj-corner.tl{top:0; left:0;}
.bj-corner.br{bottom:0; right:0; transform: rotate(180deg);}
.bj-suit{opacity:.95;}
.bj-center{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  opacity:.95;
  text-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.bj-card.back{
  background:linear-gradient(180deg, rgba(var(--accent-rgb),.22), rgba(255,255,255,.04));
  border-color:rgba(var(--accent-rgb),.30);
}
.bj-back{
  position:absolute;
  inset:10px;
  border-radius:10px;
  border:1px dashed rgba(255,255,255,.22);
  background:rgba(0,0,0,.10);
}

/* Make game headers/text more vivid */
#page-games .card-h{color: rgba(250,250,255,.98);}
#page-games .muted{color: rgba(242,242,245,.85);}


/* Games header: prevent balance/refresh overflow on small screens */
#page-games .card-h.row{ flex-wrap: wrap; gap:8px; }
#page-games .card-h.row > .row.gap{ flex-wrap: wrap; }
#page-games #games-refresh{ white-space: nowrap; }
#page-games #games-balance{ min-width: 56px !important; }

/* Roulette: make advanced table more compact */
.game-panel[data-game="roulette"] .roulette-table{ gap:4px; }
.game-panel[data-game="roulette"] .rt-num{ padding:6px 0; font-size: 11px; border-radius: 10px; }
.game-panel[data-game="roulette"] .rt-zero{ border-radius: 12px; }
.game-panel[data-game="roulette"] .roulette-table-wrap{ margin-top:6px; }
.game-panel[data-game="roulette"] .form{ margin-top:8px; }