/* kardbored animated (fixed) */
:root{--paper:#f4f1e9;--yellow:#f4c430;--ink:#111}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  display:grid;place-items:center;padding:22px;overflow-x:hidden;
}
.wrap{width:min(100%,980px);position:relative;z-index:1}
.frame{position:relative;padding:14px;background:var(--yellow);
  border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.frame img{display:block;width:100%;height:auto;border-radius:14px;background:#c9a777}

/* Top-left card list */
.card-nav{position:fixed;left:16px;top:16px;z-index:3;display:flex;flex-direction:column;gap:10px;color:#000}
.card-nav .item{position:relative;display:flex;align-items:center;gap:8px;text-decoration:none;color:#000}
.card-nav .item img{display:block;width:56px;height:auto;border-radius:8px;border:2px solid #000;background:#fff;box-shadow:0 6px 14px rgba(0,0,0,.12)}
.card-nav .label{font-weight:800;letter-spacing:.3px}

/* Global card rain */
.rain{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.drop{
  position:fixed;
  top:-15vh;
  left:var(--x,50%);
  width:28px;height:40px;
  background:url('img/mini-card.svg') center/cover no-repeat;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.15));
  will-change: top, transform;
  animation:fall var(--d,14s) linear infinite, spin var(--d,14s) linear infinite;
  animation-delay:var(--delay,0s), var(--delay,0s);
  transform:scale(var(--scale,.9));
  opacity:.9;
}
@keyframes fall{
  0%{top:-15vh}
  100%{top:110vh}
}
@keyframes spin{
  0%{transform:rotate(0deg) scale(var(--scale,.9))}
  100%{transform:rotate(540deg) scale(var(--scale,.9))}
}

/* Local hover rain (per nav item) */
.local-rain{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.droplet{
  position:absolute;top:-120%;left:var(--x,50%);
  width:20px;height:28px;
  background:url('img/mini-card.svg') center/cover no-repeat;
  transform:translate(-50%,0) scale(var(--scale,.9));
  opacity:0;will-change: top, opacity;
}
.item:hover .droplet{
  animation:fall-local .9s linear var(--delay,0s) forwards;
}
@keyframes fall-local{
  0%{top:-20%;opacity:0}
  15%{opacity:1}
  100%{top:140%;opacity:.95}
}

/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .drop,.droplet{animation:none}
}

/* Responsive */
@media (max-width:560px){
  body{padding:12px}
  .frame{padding:10px;border-radius:14px}
  .frame img{border-radius:10px}
  .card-nav{left:10px;top:10px}
  .card-nav .item img{width:48px}
}