.card-stage { --card-width: min(360px, 46svh, calc(100vw - 96px)); width: var(--card-width); aspect-ratio: 59 / 86; position: relative; perspective: 1400px; isolation: isolate; }
.paper-card { width: 100%; height: 100%; padding: 0; border: 0; background: transparent; position: absolute; inset: 0; cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; border-radius: 7px; }
.paper-card:focus-visible { outline: 2px solid #626f60; outline-offset: 12px; }
.tilt, .rotor { position: absolute; inset: 0; display: block; transform-style: preserve-3d; will-change: transform; }
.cast-shadow { position: absolute; inset: 14px 7px -16px; background: #000; opacity: .22; border-radius: 12px; filter: blur(17px); pointer-events: none; transform: translate(8px, 10px); }
.face { position: absolute; inset: 0; overflow: hidden; border-radius: 7px; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #a19b8a; box-shadow: 0 0 0 .5px #504c44, 0 1px 2px #302c2540; transform: translateZ(.7px); }
.back { transform: rotateY(180deg) translateZ(.7px); }
.face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block; pointer-events: none; -webkit-user-drag: none; }
.core { display: block; position: absolute; inset: .6px; border-radius: 7px; background: #b8af9e; box-shadow: 0 0 0 .4px #a19a88; transform: translateZ(0); }
.core::before, .core::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #a9a292; transform: translateZ(.35px); }
.core::after { transform: translateZ(-.35px); }
.paper-grain { position: absolute; inset: 0; opacity: .065; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23808080' filter='url(%23n)' d='M0 0h240v240H0z'/%3E%3C/svg%3E"); pointer-events: none; }
.satin { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at var(--light-x, 25%) var(--light-y, 18%), #fff 0%, #ffffffa0 20%, #ffffff24 48%, #fff0 76%), linear-gradient(var(--light-angle, 115deg), #ffffff32 0%, #ffffff00 40%, #20180e12 100%); opacity: var(--sheen, .12); mix-blend-mode: screen; }
.rim { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 1px 1px 1px #fff6, inset -1px -1px 1px #100c1459; }

@media(max-width:760px){.card-stage{--card-width:min(300px,52svh,calc(100vw - 96px))}}
@media(prefers-reduced-motion:reduce){.tilt,.rotor{will-change:auto}}