@font-face{font-family:Pirata;src:url('../assets/pirata.ttf')}@font-face{font-family:Bodoni;src:url('../assets/bodoni.ttf')}
*{box-sizing:border-box}body{margin:0;color:#242321;background:#dedbd5;font:17px/1.4 Bodoni,Georgia,serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible{outline:2px solid #242321;outline-offset:5px}main{min-height:100svh;display:grid;place-items:center}.room{position:relative;width:min(100vw,177.68svh);aspect-ratio:1672/941;overflow:hidden;box-shadow:0 0 70px #302d2940}.backdrop{position:absolute;width:100%;height:100%;inset:0;object-fit:fill;pointer-events:none}header{position:absolute;top:1.2%;left:0;width:100%;text-align:center}h1{font:clamp(23px,3vw,44px)/1 Pirata,Georgia,serif;margin:0;display:inline-block;padding:5px 22px;background:#f7f5ef;border:1px solid #524c43;outline:1px solid #524c4380;outline-offset:3px;box-shadow:0 4px 8px #0002}header p{margin:10px 0 0;font-size:clamp(11px,1.1vw,16px);font-style:italic;background:#fff9;display:table;margin-inline:auto;padding:0 8px}.back{position:absolute;top:8px;left:2%;font-size:14px;background:#fffdf6;padding:5px 12px;text-decoration:none;border:1px solid #857e70}
.relic{position:absolute;left:0;top:0;width:21%;height:19%;padding:0;border:0;background:transparent;will-change:transform;transform-origin:50% 100%;text-align:center}.artifact{display:flex;flex-direction:column;width:100%;height:100%;padding:7px 9px 5px;background:#faf8ef;border:1px solid #595347;outline:1px solid #b8b1a0;outline-offset:-4px;border-radius:2px 4px 2px 1px;box-shadow:2px 5px 3px #221e1940,0 0 0 3px #f2eee3;transform:rotate(var(--tilt));transition:transform .25s,box-shadow .25s}.artifact::after{content:'';position:absolute;inset:5px;pointer-events:none;border:1px solid #b7ad9770}.relic img{display:block;min-height:0;flex:1;width:100%;object-fit:contain;background:#fff;border:1px solid #b7b0a366}.relic strong{font:clamp(14px,1.35vw,21px)/1.1 Pirata,Georgia,serif;display:block;margin-top:5px}.relic small{font:clamp(9px,.7vw,11px)/1.2 monospace;letter-spacing:.1em;text-transform:uppercase;color:#716759;margin-top:3px}.relic:hover .artifact,.relic:focus-visible .artifact{transform:translateY(-9px) rotate(0);box-shadow:3px 14px 10px #221e1940,0 0 0 3px #f2eee3}.relic::before{content:'✧';position:absolute;left:50%;top:-18px;font-size:24px;opacity:0;color:#514a3e}.relic.in-flight::before{animation:spell .8s ease-out}@keyframes spell{20%,50%{opacity:.8;transform:translateY(-14px) rotate(35deg)}100%{opacity:0;transform:translateY(-28px) rotate(75deg)}}
.spellbook{position:fixed;bottom:max(16px,3svh);left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:12px;padding:11px 22px;background:#fffdf6f5;border:1px solid #5e584c;outline:1px solid #827b6880;outline-offset:4px;box-shadow:0 5px 20px #0002;max-width:94vw;z-index:5;border-radius:3px 8px 3px 8px}#filters{display:flex;gap:4px}.spellbook button{background:none;border:1px solid transparent;padding:7px 12px;font-size:16px;white-space:nowrap}.spellbook button{position:relative}
.spellbook button:is([aria-pressed=true],:hover,:focus-visible){background:none;border-color:transparent}
.spellbook button::before,.spellbook button::after{content:'';position:absolute;pointer-events:none;opacity:0;transition:opacity .18s ease}
.spellbook button::before{inset:1px 2px;border:1px solid #222;border-radius:48% 53% 44% 57%;transform:rotate(-4deg)}
.spellbook button::after{inset:3px 4px 0 1px;border-bottom:1px solid #777;border-radius:50%;transform:rotate(3deg)}
.spellbook button:is([aria-pressed=true],:hover,:focus-visible)::before,.spellbook button:is([aria-pressed=true],:hover,:focus-visible)::after{opacity:1}
@media(prefers-reduced-motion:reduce){.spellbook button::before,.spellbook button::after{transition:none}}
.divider{height:24px;border-left:1px solid #bbb3a3}#shuffle{font-style:italic}#count{font:10px monospace;letter-spacing:.08em;white-space:nowrap;color:#716759}
dialog{width:min(1020px,92vw);max-height:90svh;border:1px solid #6b6252;background:#fbfaf5;padding:40px;box-shadow:0 20px 100px #0005;color:#242321}dialog::backdrop{background:#191710aa;backdrop-filter:blur(5px)}.close{position:sticky;top:0;float:right;background:#fbfaf5;border:1px solid #aaa18c;border-radius:50%;width:38px;height:38px;font-size:25px;z-index:2}dialog h2{font:40px Pirata,Georgia,serif;margin:10px 0}dialog p{max-width:700px}dialog .classification{font:12px monospace;letter-spacing:.1em;text-transform:uppercase}dialog img{display:block;width:100%;height:auto;margin-top:24px;border:1px solid #c8c1b1}dialog .case-link{display:inline-block;margin:12px 0;padding:8px 15px;border:1px solid #817966;text-decoration:none}
@media(max-width:650px){main{display:block;padding-bottom:140px}.room{width:100%;min-height:1100px;aspect-ratio:auto;background:#e9e5da;overflow:visible}.backdrop{height:100%;object-fit:cover;object-position:center}header{top:18px}header .back{position:static;display:table;margin:0 auto 16px}header h1{font-size:34px}#collection{position:relative;padding-top:160px;min-height:1100px}.relic{width:64%;height:220px}.relic strong{font-size:22px}.relic small{font-size:10px}.spellbook{flex-wrap:wrap;gap:2px;padding:9px;bottom:12px;width:94vw}#filters{flex-wrap:wrap;justify-content:center}.spellbook button{padding:8px 10px;font-size:15px}.divider{display:none}dialog{padding:22px}dialog h2{font-size:32px}}

