@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif&family=Inter:wght@500;600&display=swap');

:root{--card:120px}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:#f2ede4;overflow:hidden;overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none;cursor:default}
canvas{position:fixed;inset:0;display:block}
.hud{position:fixed;inset:0;pointer-events:none;z-index:2}
.meta{position:absolute;top:50%;right:calc(50% + var(--card)*.80);transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}
.k{font-family:Inter,sans-serif;font-weight:600;font-size:calc(var(--card)*.082);letter-spacing:.16em;color:#3f3c34}
.year{font-family:Inter,sans-serif;font-weight:500;font-size:calc(var(--card)*.070);letter-spacing:.1em;color:#bcb5a5}
.name{position:absolute;top:50%;left:calc(50% + var(--card)*.80);transform:translateY(-50%);font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:calc(var(--card)*.180);letter-spacing:.01em;color:#2e7a57;white-space:nowrap}
.swap{animation:swap .38s cubic-bezier(.2,.7,.3,1)}
.swap2{animation:swapY .38s ease}
@keyframes swap{from{opacity:0;transform:translateY(-50%) translateY(5px)}to{opacity:1;transform:translateY(-50%) translateY(0)}}
@keyframes swapY{from{opacity:0}to{opacity:1}}