/* Hero « Quinte flush royale » — hentaionlinegames.com */
.hx{position:relative;padding:34px 0 70px;overflow:hidden;text-align:center;isolation:isolate}
.hx::before{content:"";position:absolute;inset:-10% -20% auto;height:120%;z-index:-2;
  background:radial-gradient(ellipse 38% 55% at 50% 0%,rgba(255,61,154,.28),transparent 70%),
             radial-gradient(ellipse 60% 40% at 50% 100%,rgba(155,92,255,.18),transparent 70%)}
/* faisceau de projecteur */
.hx-light{position:absolute;left:50%;top:-40px;width:min(900px,120vw);height:115%;transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:conic-gradient(from 180deg at 50% 0%,transparent 160deg,rgba(255,220,240,.10) 172deg,rgba(255,235,245,.16) 180deg,rgba(255,220,240,.10) 188deg,transparent 200deg);
  filter:blur(6px);opacity:0;transition:opacity 1.2s .3s}
.hx.on .hx-light{opacity:1}

/* enseigne néon */
.hx-sign{font-family:"Tilt Neon","Outfit",sans-serif;font-size:clamp(2.1rem,7.6vw,5.6rem);line-height:1;letter-spacing:.02em;margin:6px auto 4px;white-space:nowrap;user-select:none;display:inline-flex;gap:.08em}
.hx-sign span{display:inline-flex}
.hx-sign i{font-style:normal;color:#3a2234;text-shadow:none;transition:color .05s}
.hx-sign .t1 i,.hx-sign .t3 i{--c:#ff3d9a;--g:255,61,154}
.hx-sign .t2 i{--c:#c8a6ff;--g:155,92,255}
.hx-sign i.lit{color:#fff4fb;text-shadow:0 0 2px #fff,0 0 8px var(--c),0 0 18px var(--c),0 0 36px rgba(var(--g),.9),0 0 70px rgba(var(--g),.6)}
.hx-sign i.lit.dim{color:#7d5571;text-shadow:0 0 4px rgba(var(--g),.4)}
.hx-dom{display:block;position:relative;z-index:1;font-family:"Outfit",sans-serif;font-size:.8rem;letter-spacing:.35em;color:rgba(255,255,255,.45);margin-bottom:6px;opacity:0;transition:opacity .8s}
.hx.on .hx-dom{opacity:1}

/* table + éventail */
.hx-table{position:relative;height:calc(var(--ch,300px)*1.28);margin:22px auto 0;max-width:1000px;perspective:1300px}
.hx-felt{position:absolute;left:50%;bottom:0;width:min(940px,104vw);height:calc(var(--ch,300px)*.62);transform:translateX(-50%) rotateX(62deg);transform-origin:50% 100%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 40%,#16624f 0%,#0f3b33 55%,#082520 100%);box-shadow:0 0 0 6px #3b1a0e,0 0 0 8px #b8893a,0 30px 80px rgba(0,0,0,.7),inset 0 0 60px rgba(0,0,0,.6);opacity:0;transition:opacity 1s}
.hx.on .hx-felt{opacity:1}
.hx-fan{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.hx-card{position:absolute;left:50%;bottom:calc(var(--ch,300px)*.16);width:var(--cw,200px);height:var(--ch,300px);margin-left:calc(var(--cw,200px)/-2);transform-origin:50% 100%;
  transform:translateX(var(--x,0)) translateY(var(--y,0)) rotate(var(--r,0deg));transition:transform .45s cubic-bezier(.2,.8,.25,1.15);z-index:var(--z,1);outline:none;opacity:0}
.hx.dealt .hx-card{opacity:1}
.hx-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateY(180deg);transition:transform .7s cubic-bezier(.3,1.4,.4,1)}
.hx-card.up .hx-in{transform:rotateY(0)}
.hx-face,.hx-back{position:absolute;inset:0;border-radius:calc(var(--cw)*.075);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.hx-back{transform:rotateY(180deg);background:repeating-linear-gradient(45deg,#7a0c3a 0 6px,#5c0a2c 6px 12px);box-shadow:inset 0 0 0 4px #f6efe4,inset 0 0 0 6px #b8893a,0 14px 30px rgba(0,0,0,.6)}
.hx-back::after{content:"♥";position:absolute;inset:0;display:grid;place-items:center;color:#e8c170;font-size:calc(var(--cw)*.36);text-shadow:0 0 18px rgba(232,193,112,.6)}
.hx-face{background:#f6efe4;padding:calc(var(--cw)*.055);box-shadow:0 18px 40px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.2)}
.hx-face img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;border-radius:calc(var(--cw)*.04);display:block}
.hx-idx{position:absolute;display:flex;flex-direction:column;align-items:center;font-family:"Playfair Display",Georgia,serif;font-weight:700;color:#c8104e;line-height:.9;
  font-size:calc(var(--cw)*.15);background:#f6efe4;padding:3px 4px 5px;border-radius:0 0 8px 0;top:0;left:0;z-index:2}
.hx-idx b{font-size:.78em;font-weight:400}
.hx-idx.br{top:auto;left:auto;bottom:0;right:0;transform:rotate(180deg);border-radius:0 0 8px 0}
.hx-plate{position:absolute;left:12%;right:12%;bottom:calc(var(--cw)*.075);z-index:2;font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:700;font-size:calc(var(--cw)*.105);
  color:#2a0d1f;background:linear-gradient(180deg,#f8dc9a,#d9a64e);border-radius:4px;padding:2px 0;box-shadow:0 2px 8px rgba(0,0,0,.45)}
.hx-foil{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:color-dodge;opacity:0;transition:opacity .3s;border-radius:inherit;
  background:linear-gradient(115deg,transparent 20%,rgba(255,61,154,.55) 36%,rgba(120,220,255,.55) 48%,rgba(255,230,120,.55) 60%,transparent 76%);
  background-size:250% 250%;background-position:var(--fx,50%) var(--fy,50%)}
.hx-shine{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,transparent 35%,rgba(255,236,170,.85) 50%,transparent 65%);background-size:300% 100%;background-position:120% 0;opacity:0}
.hx.flush .hx-shine{animation:hxShine 1.1s calc(var(--i)*.12s) ease-out forwards}
@keyframes hxShine{0%{opacity:1;background-position:120% 0}100%{opacity:1;background-position:-30% 0}}

/* interaction */
/* la zone de survol (.hx-card) reste fixe : seul le visuel intérieur bouge, donc plus de clignotement */
.hx.ready .hx-card:hover,.hx.ready .hx-card:focus-visible,.hx.ready .hx-card.sel{z-index:20}
.hx-in{transform-origin:50% 100%}
.hx.ready .hx-card.up .hx-in{transition:transform .35s cubic-bezier(.2,.8,.25,1.1)}
.hx.ready .hx-card.up:hover .hx-in,.hx.ready .hx-card.up:focus-visible .hx-in,.hx.ready .hx-card.up.sel .hx-in{transform:translateY(calc(var(--ch)*-.12)) rotate(calc(var(--r)*-.7)) scale(1.08)}
.hx.ready .hx-card:hover .hx-foil,.hx.ready .hx-card:focus-visible .hx-foil,.hx.ready .hx-card.sel .hx-foil{opacity:.75}
.hx-card:focus-visible .hx-face{box-shadow:0 0 0 3px #ff3d9a,0 18px 40px rgba(0,0,0,.65)}

/* « quinte flush royale » */
.hx-call{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:700;color:#e8c170;font-size:clamp(1.05rem,2.6vw,1.6rem);margin:6px 0 0;
  text-shadow:0 0 24px rgba(232,193,112,.55);opacity:0;transform:scale(1.6);letter-spacing:.02em}
.hx.flush .hx-call{animation:hxStamp .55s .55s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes hxStamp{to{opacity:1;transform:scale(1)}}

.hx-txt{max-width:760px;margin:22px auto 0;opacity:0;transform:translateY(16px);transition:opacity .8s,transform .8s}
.hx.ready .hx-txt{opacity:1;transform:none}
.hx-txt h1{font-size:clamp(1.5rem,3.6vw,2.5rem);margin-bottom:12px}
.hx-txt p{color:var(--mut);margin:0 auto 24px;max-width:620px}

/* éclats de cœurs */
.hx-burst{position:absolute;left:50%;top:55%;width:0;height:0;pointer-events:none;z-index:30}
.hx-burst i{position:absolute;font-style:normal;color:var(--c);font-size:var(--s);text-shadow:0 0 10px var(--c);animation:hxBurst 1.3s cubic-bezier(.1,.7,.3,1) forwards}
@keyframes hxBurst{0%{transform:translate(0,0) scale(.3);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(1);opacity:0}}

@media (max-width:560px){
  .hx{padding-top:20px}
  .hx-dom{font-size:.66rem;letter-spacing:.25em}
  .hx-idx{padding:2px 3px 3px}
}
@media (prefers-reduced-motion:reduce){
  .hx-card,.hx-in,.hx-txt,.hx-fan{transition:none!important}
  .hx-card{opacity:1}.hx-in{transform:none}.hx-txt{opacity:1;transform:none}.hx-call{opacity:1;transform:none}
}