/* ============================================================
   CRYPTEX "NEW EXCITING GAMES!" — css/featured.css
   Sidebar featured block (between Autumn Special Promos and
   Direct Messages). Shown by js/featured.js only while the
   Manila date is on or before 2026-09-30; the block starts
   `hidden` and is removed after that. Preview: ?featured=on|off
   ============================================================ */

.cx-featured{display:block;flex:0 0 auto;margin:6px 10px 4px;position:relative}
.cx-featured[hidden]{display:none!important}

/* ---- Card shell: own dark purple base so gold/pink reads in every theme ---- */
.cx-featured-card{
  position:relative;overflow:hidden;border-radius:16px;
  padding:10px 10px 9px;
  background:
    radial-gradient(120% 80% at 100% 0%,rgba(249,168,212,.16),transparent 55%),
    radial-gradient(90% 70% at 0% 100%,rgba(255,209,102,.14),transparent 55%),
    linear-gradient(135deg,#1b0a30 0%,#2b1048 48%,#150726 100%);
  border:1px solid rgba(255,209,102,.42);
  box-shadow:0 0 0 rgba(255,209,102,0),inset 0 1px 0 rgba(255,236,200,.12);
  animation:cxFeatGlow 3.4s ease-in-out infinite;
}
/* drifting light sweep, same rhythm family as the autumn card */
.cx-featured-card::after{
  content:'';position:absolute;top:-40%;bottom:-40%;left:-30%;width:26%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,240,220,.16),transparent);
  transform:skewX(-18deg);animation:cxFeatSweep 5.2s ease-in-out infinite;
}

/* ---- Header ---- */
.cx-featured-head{
  display:flex;align-items:center;gap:8px;margin:0 2px 8px;position:relative;z-index:1;
}
.cx-featured-spark{
  width:18px;height:18px;flex:0 0 auto;color:#ffd166;
  filter:drop-shadow(0 0 6px rgba(255,209,102,.7));
  animation:cxFeatSpark 1.8s ease-in-out infinite;
}
.cx-featured-spark svg{width:100%;height:100%;display:block;opacity:1}
.cx-featured-title{
  flex:1 1 auto;min-width:0;
  font-family:'Inter',sans-serif;font-weight:900;font-size:clamp(.72rem,3.4vw,.88rem);
  letter-spacing:0;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(90deg,#ffd166 0%,#fff3d9 25%,#f9a8d4 50%,#ffd166 75%,#fff3d9 100%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:cxFeatShine 3.2s linear infinite;
}
.cx-featured-title em{font-style:normal;text-transform:uppercase;letter-spacing:.6px}
.cx-featured-new{
  flex:0 0 auto;font-size:.5rem;font-weight:900;letter-spacing:1.4px;line-height:1;
  padding:4px 7px;border-radius:999px;color:#1a0f00;
  background:linear-gradient(90deg,#ffd166,#f9a8d4);
  box-shadow:0 0 10px rgba(249,168,212,.55);
  animation:cxFeatPulse 1.6s ease-in-out infinite;
}

/* ---- Rows ---- */
.cx-featured-list{display:flex;flex-direction:column;gap:5px;position:relative;z-index:1}
.cx-feat-row{
  display:flex;align-items:center;gap:9px;
  padding:7px 8px 7px 7px;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);
  border-left:3px solid var(--cx-feat-accent,#ffd166);
  transition:background .18s,transform .18s,border-color .18s,box-shadow .18s;
  -webkit-tap-highlight-color:transparent;user-select:none;
}
.cx-feat-row:hover,.cx-feat-row:active{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,209,102,.35);border-left-color:var(--cx-feat-accent,#ffd166);
  transform:translateX(2px);
  box-shadow:0 4px 14px rgba(0,0,0,.28);
}
.cx-feat-ico{
  width:32px;height:32px;flex:0 0 auto;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  color:var(--cx-feat-accent,#ffd166);
  background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 0 12px color-mix(in srgb,var(--cx-feat-accent,#ffd166) 35%,transparent);
}
.cx-feat-ico svg{width:17px;height:17px;opacity:1;display:block}
.cx-feat-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.cx-feat-name{
  font-family:'Inter',sans-serif;font-weight:800;font-size:clamp(.78rem,3.4vw,.86rem);
  color:#fff7ea;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cx-feat-tag{
  font-family:'Inter',sans-serif;font-weight:500;font-size:.64rem;
  color:rgba(255,236,210,.68);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cx-feat-badge{
  flex:0 0 auto;font-size:.5rem;font-weight:900;letter-spacing:1.1px;line-height:1;
  padding:4px 6px;border-radius:8px;color:#1a0f00;
  background:linear-gradient(90deg,#ffd166,#f9a8d4);
}
.cx-feat-badge.hot{background:linear-gradient(90deg,#ff8c42,#ff4466);color:#fff}
.cx-feat-badge.fresh{background:linear-gradient(90deg,#4ade80,#67e8f9);color:#0b0724}

/* per-game accents */
.cx-feat-row.superace{--cx-feat-accent:#ffb84d}
.cx-feat-row.plinko{--cx-feat-accent:#f0abfc}
.cx-feat-row.mines{--cx-feat-accent:#4ade80}
.cx-feat-row.hub{--cx-feat-accent:#f9a8d4}

/* fallback for browsers without color-mix */
@supports not (color:color-mix(in srgb,red 50%,blue)){
  .cx-feat-ico{box-shadow:0 0 12px rgba(255,209,102,.3)}
}

@keyframes cxFeatShine{to{background-position:-250% 0}}
@keyframes cxFeatSweep{0%{left:-30%}55%,100%{left:130%}}
@keyframes cxFeatGlow{
  0%,100%{box-shadow:0 0 0 rgba(255,209,102,0),inset 0 1px 0 rgba(255,236,200,.12)}
  50%{box-shadow:0 0 18px rgba(249,168,212,.32),0 0 6px rgba(255,209,102,.25),inset 0 1px 0 rgba(255,236,200,.12)}
}
@keyframes cxFeatSpark{0%,100%{transform:scale(1) rotate(0deg);opacity:.9}50%{transform:scale(1.25) rotate(18deg);opacity:1}}
@keyframes cxFeatPulse{0%,100%{transform:scale(1);box-shadow:0 0 6px rgba(249,168,212,.4)}50%{transform:scale(1.08);box-shadow:0 0 14px rgba(249,168,212,.85)}}

@media (prefers-reduced-motion:reduce){
  .cx-featured-card,.cx-featured-card::after,.cx-featured-title,.cx-featured-spark,.cx-featured-new{animation:none}
}