/* replay 3D du site */
.rp3{position:relative;overflow:hidden;background:#06080c;user-select:none}
.rp3-cv{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.rp3-cv:active{cursor:grabbing}
.rp3::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,#05070bcc 100%)}
.rp3-lbl{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.rp3-lb{position:absolute;left:0;top:0;font:700 11px var(--font);padding:2px 8px;border-radius:6px;background:#05070bcc;border:1px solid #ffffff1c;color:#fff;white-space:nowrap;will-change:transform}
.rp3-lb.atk{border-color:#ff465577} .rp3-lb.def{border-color:#3ee6d077}
.rp3-top{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:3;display:flex;align-items:stretch;filter:drop-shadow(0 8px 20px #000a);pointer-events:none}
.rp3-top .t{display:flex;align-items:center;gap:10px;padding:0 16px;background:#0b0f17e6;border:1px solid #ffffff14}
.rp3-top .t b{font:700 28px var(--disp)} .rp3-top .t span{font:800 10px var(--font);letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.rp3-top .atk{border-radius:12px 0 0 12px;border-right:0;box-shadow:inset 0 -3px 0 #ff4655} .rp3-top .atk b{color:#ff4655}
.rp3-top .def{border-radius:0 12px 12px 0;border-left:0;box-shadow:inset 0 -3px 0 #3ee6d0} .rp3-top .def b{color:#3ee6d0}
.rp3-top .clk{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:130px;padding:6px 14px;background:linear-gradient(180deg,#151b28f2,#0e131df2);border:1px solid #ffffff1f}
.rp3-top .clk b{font:700 26px var(--disp);font-variant-numeric:tabular-nums;line-height:1.05}
.rp3-top .clk i{font:700 10px var(--font);font-style:normal;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.rp3-top .clk.spk{background:linear-gradient(180deg,#3a0d14f2,#1d070bf2);border-color:#ff465588} .rp3-top .clk.spk b{color:#ff7a85;font-size:22px}
.rp3-alive{position:absolute;top:78px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:8px;align-items:center;padding:3px 12px;border-radius:999px;background:#05070bcc;border:1px solid #ffffff12;font:700 15px var(--disp);pointer-events:none}
.rp3-alive .a{color:#ff4655} .rp3-alive .d{color:#3ee6d0} .rp3-alive i{font-style:normal;color:var(--faint);font-size:11px}
.rp3-feed{position:absolute;top:14px;right:14px;z-index:3;display:flex;flex-direction:column;gap:5px;align-items:flex-end;pointer-events:none}
.rp3-feed .kf{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:9px;background:#0b0f17e6;border-left:3px solid #fff;animation:kfIn .3s ease-out}
.rp3-feed .kf.atk{border-left-color:#ff4655} .rp3-feed .kf.def{border-left-color:#3ee6d0}
.rp3-feed img{width:26px;height:26px;border-radius:7px} .rp3-feed .w img{width:auto;height:15px;border-radius:0;filter:brightness(1.5)}
@keyframes kfIn{from{opacity:0;transform:translateX(16px)}}
.rp3-kc{position:absolute;left:50%;bottom:92px;z-index:4;display:flex;align-items:center;gap:12px;padding:8px 16px 8px 8px;border-radius:14px;background:linear-gradient(90deg,#0b0f17f2,#141a27f2);border:1px solid #ffffff1a;
  box-shadow:0 18px 40px -12px #000;pointer-events:none;opacity:0;transform:translate(-50%,16px) scale(.96);transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.rp3-kc.on{opacity:1;transform:translate(-50%,0)} .rp3-kc.atk{border-left:3px solid #ff4655} .rp3-kc.def{border-left:3px solid #3ee6d0}
.rp3-kc span{display:flex;align-items:center;gap:8px} .rp3-kc img{width:34px;height:34px;border-radius:9px} .rp3-kc .w img{width:auto;height:20px;border-radius:0;filter:brightness(1.5)}
.rp3-kc b{font-size:14px} .rp3-kc .v b{color:var(--muted);text-decoration:line-through}
.rp3-kc em{font:800 10.5px var(--font);font-style:normal;letter-spacing:.6px;text-transform:uppercase;color:var(--warn);padding-left:10px;border-left:1px solid #ffffff1a}
.rp3-ros{position:absolute;top:14px;z-index:3;display:flex;flex-direction:column;gap:5px;width:170px}
.rp3-ros.atk{left:14px} .rp3-ros.def{right:14px;top:auto;bottom:86px}
.rp3-ros button{display:grid;grid-template-columns:30px 1fr auto;gap:8px;align-items:center;padding:4px 8px 4px 4px;border-radius:10px;border:1px solid #ffffff12;background:#0b0f17e0;color:var(--text);cursor:pointer;text-align:left;font:600 12px var(--font);transition:all .2s}
.rp3-ros.atk button{box-shadow:inset 3px 0 0 #ff4655} .rp3-ros.def button{box-shadow:inset 3px 0 0 #3ee6d0}
.rp3-ros button:hover{border-color:#ffffff38;transform:translateX(2px)} .rp3-ros button.foc{border-color:#fff;box-shadow:0 0 16px #ffffff33}
.rp3-ros img{width:30px;height:30px;border-radius:8px} .rp3-ros span{display:flex;gap:2px} .rp3-ros span i{width:5px;height:12px;border-radius:2px;background:var(--warn)}
.rp3-ros button.dead{opacity:.4;filter:grayscale(1)} .rp3-ros button.dead b{text-decoration:line-through}
.rp3-end{position:absolute;left:50%;top:44%;z-index:5;transform:translate(-50%,-50%) scale(.9);opacity:0;transition:all .4s cubic-bezier(.2,.8,.2,1);text-align:center;padding:16px 36px;border-radius:16px;background:#05070be6;border:1px solid #ffffff22;pointer-events:none}
.rp3-end.on{opacity:1;transform:translate(-50%,-50%)} .rp3-end b{display:block;font:700 34px var(--disp);letter-spacing:3px;text-transform:uppercase} .rp3-end.atk b{color:#ff4655} .rp3-end.def b{color:#3ee6d0}
.rp3-end span{font-size:12px;color:var(--muted)}
.rp3-dock{position:absolute;left:14px;right:14px;bottom:14px;z-index:4;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:#0b0f17ee;border:1px solid #ffffff14;backdrop-filter:blur(6px)}
.rp3-play{width:42px;height:36px;border:0;border-radius:10px;background:linear-gradient(180deg,#ff5866,#e0303f);color:#fff;font-size:14px;cursor:pointer;box-shadow:0 8px 20px -8px #ff4655}
.rp3-scrub{position:relative;flex:1;height:30px;cursor:pointer;touch-action:none}
.rp3-scrub .tr{position:absolute;left:0;right:0;top:12px;height:6px;border-radius:4px;background:#ffffff14;overflow:hidden} .rp3-scrub .tr i{display:block;height:100%;background:linear-gradient(90deg,#ff4655,#ff8a70)}
.rp3-scrub .kn{position:absolute;top:8px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #ff465566;pointer-events:none}
.rp3-scrub .mk i{position:absolute;top:2px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:#fff} .rp3-scrub .mk i.atk{background:#ff4655} .rp3-scrub .mk i.def{background:#3ee6d0}
.rp3-scrub .mk b{position:absolute;top:17px;margin-left:-7px;font-size:11px}
.rp3-time{font:600 12px var(--font);color:var(--muted);min-width:84px;font-variant-numeric:tabular-nums}
.rp3-seg{display:flex;padding:3px;border-radius:10px;background:#070a10;border:1px solid var(--line2)}
.rp3-seg button{height:28px;padding:0 10px;border:0;border-radius:7px;background:transparent;color:var(--muted);font:700 12px var(--font);cursor:pointer}
.rp3-seg button.on{background:linear-gradient(180deg,#262e40,#1b2130);color:#fff}
.rp3-help{position:absolute;right:14px;bottom:70px;z-index:3;font-size:11.5px;color:var(--muted);background:#05070bb3;padding:4px 10px;border-radius:8px;pointer-events:none}
@media (max-width:900px){ .rp3-ros,.rp3-help{display:none} .rp3-seg.sp{display:none} }