:root{--blue:#2B45B8;--orange:#FF6A2B;--over:#161A45;--paper:#EEF1F0;--paper-2:#DCE2E6;}*{box-sizing:border-box;margin:0;padding:0}html{overflow-x:clip;background:var(--over);-webkit-text-size-adjust:100%}body{min-height:100dvh;display:grid;place-items:center;overflow-x:clip;background:var(--over);color:var(--over);font-family:"Libre Caslon Text",Georgia,"Times New Roman",serif;perspective:1400px;}.card{width:100%;max-width:430px;min-height:100dvh;display:flex;flex-direction:column;gap:6px;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));background:var(--blue);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1);will-change:transform;}.card.held{transition:transform .08s linear}.head{display:flex;align-items:center;gap:12px;padding:2px 4px 2px 2px;color:var(--paper);}.logo{flex:none;display:block;width:clamp(56px,15vw,80px);height:auto;aspect-ratio:1;border-radius:22%;}.name{font-weight:700;font-size:clamp(1.15rem,1rem + 0.8vw,1.4rem);line-height:1.1;}.set{display:block;margin-top:3px;font-weight:400;font-style:italic;font-size:clamp(0.78rem,0.74rem + 0.2vw,0.86rem);}.no{margin-left:auto;align-self:flex-start;padding-top:4px;font-size:clamp(0.78rem,0.74rem + 0.2vw,0.86rem);}.plate{background:var(--paper);border-radius:6px;padding:11px 13px 12px;}h1{font-weight:700;font-size:clamp(1.5rem,1.1rem + 1.9vw,1.95rem);line-height:1.12;letter-spacing:-0.01em;text-wrap:balance;}.sub{margin-top:7px;font-size:clamp(0.84rem,0.8rem + 0.25vw,0.95rem);line-height:1.38;}.art{flex:1 1 auto;position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;min-height:126px;padding:22px 13px 12px;background:var(--paper);border:2px solid var(--over);border-radius:6px;overflow:hidden;}.art::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,var(--blue) 1px,transparent 1.3px);background-size:7px 7px;opacity:.16;-webkit-mask-image:linear-gradient(115deg,#000 0%,transparent 46%);mask-image:linear-gradient(115deg,#000 0%,transparent 46%);pointer-events:none;}.eg{position:absolute;top:0;right:0;padding:3px 9px 4px;background:var(--over);color:var(--paper);font-style:italic;font-size:clamp(0.74rem,0.7rem + 0.2vw,0.82rem);border-bottom-left-radius:6px;}.inks{position:relative;width:clamp(84px,25vw,112px);height:auto;display:block;}.inks .b,.inks .o{mix-blend-mode:multiply}.rows{position:relative;display:grid;gap:0}.rows div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:5px 0;border-bottom:1px solid var(--paper-2);}.rows div:last-child{border-bottom:0}.rows dt{font-style:italic;font-size:clamp(0.78rem,0.74rem + 0.2vw,0.86rem);color:var(--blue);}.rows dd{font-weight:700;font-size:clamp(0.86rem,0.82rem + 0.25vw,0.98rem);text-align:right;}.type{background:var(--over);color:var(--paper);border-radius:6px;padding:6px 13px 7px;font-size:clamp(0.8rem,0.76rem + 0.2vw,0.88rem);display:flex;justify-content:space-between;gap:8px;}.type i{font-style:italic}.text{background:var(--paper);border-radius:6px;padding:10px 13px 11px;display:grid;gap:6px;font-size:clamp(0.84rem,0.8rem + 0.25vw,0.95rem);line-height:1.36;}.text strong{font-weight:700;color:var(--blue)}.play{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:10px 16px;background:var(--orange);color:var(--over);border-radius:6px;font-weight:700;font-size:clamp(1.05rem,0.98rem + 0.4vw,1.2rem);line-height:1.15;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform .15s ease;}.play svg{flex:none;width:26px;height:26px}.play:active{transform:scale(.98)}.play:focus-visible{outline:3px solid #fff;outline-offset:2px}@media (hover: hover) and (pointer: fine){.play:hover svg{transform:translateX(4px)}.play svg{transition:transform .2s ease}}footer{padding:3px 4px 1px;color:var(--paper);font-size:clamp(0.72rem,0.69rem + 0.15vw,0.78rem);line-height:1.35;text-align:center;}@media (min-width:600px){body{padding:20px 0}.card{min-height:0;border-radius:16px;padding:14px;gap:8px}.art{min-height:170px}}@media (min-height:740px) and (max-width:599px){.art{grid-template-columns:1fr;justify-items:center;align-content:center;gap:10px}.inks{width:clamp(120px,40vw,168px)}.rows{width:100%}}@media (max-height:600px){.sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}@media (prefers-reduced-motion: reduce){.card,.play,.play svg{transition:none}.card{transform:none}}