/* 3D interactive layer (pure CSS 3D, no libraries). Flat fallback under prefers-reduced-motion. */
:root{--bg:#0f1a24;--card:rgba(255,255,255,.07);--ink:#eef4f1;--mut:#a9bab3;--acc:#2fae8f;--warn:#ffb36b;--gold:#f5c86a}
body{background:radial-gradient(120% 80% at 50% -10%,#1d3a44 0,#0f1a24 60%) fixed;color:var(--ink);overflow-x:hidden}
.bg3d{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bg3d i{position:absolute;border-radius:50%;filter:blur(40px);opacity:.35;transform:translate3d(calc(var(--px,0)*var(--d)),calc(var(--py,0)*var(--d)),0)}
.bg3d i:nth-child(1){--d:20px;width:260px;height:260px;background:#2fae8f;left:-60px;top:80px}
.bg3d i:nth-child(2){--d:-30px;width:220px;height:220px;background:#6a5cff;right:-50px;top:340px}
.bg3d i:nth-child(3){--d:12px;width:300px;height:300px;background:#f5c86a;left:30%;top:720px;opacity:.15}
.card{background:var(--card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.warn{background:rgba(255,179,107,.1)}
input,select{background:rgba(255,255,255,.92);color:#16231e;border-color:transparent}
.sec{background:rgba(255,255,255,.14);color:var(--ink)}
button,.btn{transition:transform .15s,box-shadow .15s;color:#06140f;font-weight:600}.sec{font-weight:500}
button:active,.btn:active{transform:translateY(1px) scale(.97)}
button:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.tag{background:rgba(255,179,107,.2);color:var(--warn)}
footer a{color:var(--mut)}
/* hero */
.hero{display:flex;align-items:center;gap:14px;margin:8px 0 4px}
.scene{width:130px;height:130px;perspective:500px;flex:none;position:relative}
.ring{position:absolute;inset:0;transform-style:preserve-3d;animation:spin 14s linear infinite;transform:rotateX(68deg)}
.coin{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px;border-radius:50%;
 background:radial-gradient(circle at 35% 30%,#fff3c4,var(--gold) 45%,#b8892c);box-shadow:0 0 10px rgba(245,200,106,.6);
 transform:rotateZ(var(--a)) translateX(52px) rotateX(-90deg)}
.coin.hot{background:radial-gradient(circle at 35% 30%,#ffe0c2,#ff8a3d 50%,#b4501c);box-shadow:0 0 14px #ff8a3d}
.core{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#bff5e5,#2fae8f 60%,#0d5546);box-shadow:0 0 30px #2fae8f;animation:bob 3s ease-in-out infinite}
@keyframes spin{to{transform:rotateX(68deg) rotateZ(360deg)}}
@keyframes bob{50%{transform:translateY(-6px)}}
.heroTxt{display:flex;flex-direction:column}.heroTxt strong{font-size:1.9rem;line-height:1.15;color:#fff}
/* 3D cards */
#list{display:grid;gap:12px;perspective:900px}
.item{display:block;padding:0;border:0!important;transform-style:preserve-3d;transition:transform .2s ease-out;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.flip{position:relative;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,1.4,.5,1);min-height:96px;display:grid}
.item.flipped .flip{transform:rotateY(180deg)}
.face{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:12px;padding:12px;display:flex;justify-content:space-between;gap:8px;align-items:flex-start;
 background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.18);box-shadow:0 8px 18px rgba(0,0,0,.3)}
.back{transform:rotateY(180deg);background:linear-gradient(135deg,rgba(47,174,143,.28),rgba(255,255,255,.05))}
.acts{display:flex;flex-direction:column;gap:4px}.price{font-size:1.05rem;margin-top:2px}
.item.due .face{animation:glow 2.4s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 0 1px var(--warn),0 0 22px rgba(255,138,61,.55)}}
.item.drop{animation:drop .7s cubic-bezier(.2,1.3,.4,1)}
@keyframes drop{from{opacity:0;transform:translateY(-80px) rotateX(70deg) scale(.8)}}
/* unlock burst */
.burst{position:fixed;inset:0;pointer-events:none;display:grid;place-items:center;z-index:9}
.burst b{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--gold);animation:fly 1s ease-out forwards}
.burst span{font-size:1.6rem;font-weight:700;color:#fff;background:rgba(47,174,143,.9);padding:10px 18px;border-radius:14px;animation:pop 1.4s ease-out forwards}
@keyframes fly{to{transform:translate(var(--x),var(--y)) scale(.3);opacity:0}}
@keyframes pop{0%{transform:scale(.3) rotateX(80deg)}30%{transform:scale(1.1)}80%{opacity:1}100%{opacity:0}}
/* flat fallback */
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 .item{transform:none!important}.ring{transform:none}.bg3d i{transform:none}
 .item.flipped .flip{transform:none}.back{transform:none}.item.flipped .front{visibility:hidden}.item:not(.flipped) .back{visibility:hidden}
}
/* "beep" motif: sonar ping from the hero core and from due-soon cards */
.core::after,.item.due .front::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--acc);animation:beep 2.4s ease-out infinite;pointer-events:none}
.item.due .front{position:relative}.item.due .front::before{inset:auto;right:10px;bottom:10px;width:10px;height:10px;border-color:var(--warn);background:var(--warn)}
@keyframes beep{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.6);opacity:0}}