/* A quiet display case lets the colour and surface of the card do the work. */
.card-material-canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;pointer-events:none;z-index:2}
.card-material-canvas[hidden]{display:none}
[data-renderer="webgl"]>.card-finish{visibility:hidden}
.inspection-modal{width:1140px;padding:28px;border:1px solid #d9dedb;background:#f6f7f3;border-radius:24px;box-shadow:0 30px 110px #06191755}
.inspection-modal::backdrop{background:#12201ce0;backdrop-filter:blur(12px)}
.inspection-layout{grid-template-columns:minmax(0,1fr) 280px;gap:0 32px}
.inspection-info{padding:35px 12px 0 0}.inspection-info h2{font-size:32px;letter-spacing:-1.2px;line-height:1.15;margin:14px 0}.inspection-info .eyebrow{color:#6a736a;line-height:1.8}
.inspection-info>.rarity{color:#887048;letter-spacing:.3px;font-size:12px}.inspection-info .inspection-ownership{margin:20px 0;color:#647168;line-height:1.6}
.inspection-stage{--inspection-height:clamp(420px,65dvh,650px);min-height:0;border-radius:18px;border:1px solid #ffffff1a;background:radial-gradient(ellipse at 45% 26%,#31424a 0%,#192a31 40%,#0e191e 85%);box-shadow:inset 0 1px 0 #ffffff0d;transition:background .5s}
.inspection-stage:before{content:"";position:absolute;width:90%;height:34%;bottom:-10%;left:5%;border-radius:50%;background:#90bcc51a;filter:blur(35px);pointer-events:none}
.inspection-stage[data-lighting="gallery"]{background:radial-gradient(ellipse at 45% 22%,#554632,#27271f 48%,#131b19 95%)}
.inspection-stage[data-lighting="daylight"]{background:radial-gradient(ellipse at 40% 20%,#f6fbfa,#cfdddf 62%,#b2c5ca)}
.inspection-position{width:min(74%,360px,calc(var(--inspection-height)*.59));perspective:1400px;z-index:1}
.inspection-card{border-radius:4.2%;box-shadow:1px 1px 0 #d4d8cf,2px 2px 0 #b4bab4,3px 3px 0 #758482,4px 5px 2px #0d1a2077,12px 26px 24px #0006,20px 45px 60px #0006;transform-origin:center;transition:box-shadow .25s}
.inspection-card img{border-radius:inherit}.inspection-stage-label,.inspection-zoom{color:#b1c7ca;font-size:9px;letter-spacing:1.6px;bottom:22px}
.inspection-stage[data-lighting="daylight"] :is(.inspection-stage-label,.inspection-zoom){color:#49636a}
.inspection-workbench #inspection-help{margin:16px auto 0;font-size:11px;color:#68766f;max-width:360px;line-height:1.8}
.inspection-sweep{display:flex;align-items:center;justify-content:center;gap:22px;margin:8px auto 0;min-height:40px;background:transparent;color:#34594d;font-size:12px;border-radius:20px;padding:8px 16px}.inspection-sweep:hover{background:#e6eee8}
.inspection-lighting{display:flex;gap:5px;padding:4px;background:#e5ebe5;border-radius:10px}.inspection-lighting button{flex:1;min-height:40px;padding:8px 5px;border-radius:7px;background:transparent;font-size:10px;color:#5d6d63;white-space:nowrap}.inspection-lighting button[aria-pressed="true"]{background:#fff;color:#2e5141;box-shadow:0 2px 5px #263e2512}
.inspection-settings select{min-height:44px;border-color:#d5ded5;border-radius:9px;background:#ffffffa6}.inspection-settings .inspection-label{font-size:11px;letter-spacing:.2px;margin-top:20px}.inspection-adjustments{margin-top:20px}.inspection-adjustments>summary{font-size:12px}
.inspection-info>.secondary{display:flex;align-items:center;justify-content:center;width:100%;border-radius:9px;min-height:44px;margin:8px 0;background:#ffffff8c;border:1px solid #d9e1d8}
.inspection-browse{justify-content:center;gap:26px;font-variant-numeric:tabular-nums}.inspection-browse button{border-radius:50%;min-width:44px;padding:9px;background:#fff}
/* Binder images remain inexpensive: no WebGL context per thumbnail. */
.card-frame{border-radius:5%;isolation:isolate;box-shadow:0 2px 2px #17302725,0 7px 13px #1730271f;transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s}
.card-frame>img{border-radius:inherit}.card-frame .copy-count,.card-frame .favorite-mark,.card-frame .new-badge,.card-frame .unowned-badge{z-index:3}
.card-tile:hover .card-frame,.card-tile:focus-visible .card-frame{transform:perspective(900px) translateY(-6px) rotateY(-4deg);box-shadow:2px 3px 0 #b3c1b5,8px 15px 22px #18392d30}
.card-tile .card-finish{--foil-strength:.27;--shine-x:35%;--shine-y:30%}.card-tile:hover .card-finish{--shine-x:70%;--shine-y:60%;--foil-strength:.55}
.cinematic-opening .card-tilt{position:relative;border-radius:4.2%;isolation:isolate;overflow:hidden;box-shadow:1px 1px 0 #dce1d7,2px 3px 0 #899997,0 14px 30px #16353335}
.cinematic-opening .highlight-art{position:relative;isolation:isolate;overflow:hidden;border-radius:5%;box-shadow:2px 3px 0 #a1b4a6,0 12px 24px #203a332b}
/* A cut paper core, a polished perimeter and a recessed inner edge.
   The rim is separate from the artwork and foil, including in the CSS fallback. */
:is(.inspection-card,.cinematic-opening .card-tilt,.cinematic-opening .highlight-art,.card-frame){
 --rim-width:1px;--rim-light:#fff2c2;--rim-mid:#c3ad69;--rim-dark:#655b38;--edge-x:.4px;--edge-y:.8px;
 border-radius:3.5% / 2.5%;
}
:is(.inspection-card,.card-tilt,.highlight-art,.card-frame):has(.card-finish[data-edge="silver"]){
 --rim-width:2.4px;--rim-light:#f3fdff;--rim-mid:#9aaeba;--rim-dark:#354553;
}
:is(.inspection-card,.card-tilt,.highlight-art,.card-frame):has(.card-finish[data-edge="gold"]){
 --rim-width:2.6px;--rim-light:#fff3ba;--rim-mid:#bd8e35;--rim-dark:#614020;
}
:is(.inspection-card,.card-tilt,.highlight-art,.card-frame)::after{
 content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;padding:var(--rim-width);
 background:linear-gradient(var(--shine-angle,125deg),var(--rim-dark) 0%,var(--rim-mid) 10%,var(--rim-light) 22%,var(--rim-mid) 32%,var(--rim-dark) 46%,var(--rim-mid) 64%,var(--rim-light) 78%,var(--rim-dark) 100%);
 background-size:180% 180%;background-position:var(--shine-x,40%) var(--shine-y,35%);
 -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
 mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
}
:is(.inspection-card,.card-tilt,.highlight-art,.card-frame)::before{
 content:"";position:absolute;inset:var(--rim-width);z-index:3;pointer-events:none;border-radius:inherit;
 box-shadow:inset 0 0 0 .6px #0e1c246e,0 0 0 .5px #ffffff80;
}
.inspection-card{
 box-shadow:var(--edge-x) var(--edge-y) 0 var(--rim-mid),calc(var(--edge-x)*1.6) calc(var(--edge-y)*1.6) 0 var(--rim-dark),0 2px 3px #0006,5px 12px 18px #0005,12px 30px 45px #0005;
}
.cinematic-opening :is(.card-tilt,.highlight-art){box-shadow:var(--edge-x) var(--edge-y) 0 var(--rim-mid),0 2px 3px #16353344,0 14px 26px #16353335}
.card-frame>img,.inspection-card>img,.cinematic-opening :is(.card-tilt,.highlight-art)>img{border-radius:inherit}
.card-frame{--rim-width:.8px}.card-frame:has(.card-finish[data-mask="full"]),.card-frame:has(.card-finish[data-material="reverse"]){--rim-width:1.2px}
:is(.inspection-card,.card-tilt,.highlight-art,.card-frame):has(.card-finish[data-edge="paper"]){--rim-width:1px;--rim-light:#fff2c2;--rim-mid:#c3ad69;--rim-dark:#655b38}
:is(.inspection-card,.card-tilt,.highlight-art,.card-frame):has(.card-finish[data-edge="black"]){--rim-width:1px;--rim-light:#727b88;--rim-mid:#202935;--rim-dark:#080e16}
.summary-art,.batch-art,.dex-slot.owned,.elite-promo>button{position:relative;isolation:isolate;overflow:hidden;border-radius:4%}
.batch-art{display:block;line-height:0}.batch-art>img{width:100%;display:block}
:is(.summary-card,.batch-card,.dex-slot,.elite-promo>button) .card-finish{--foil-strength:.3;--shine-x:35%;--shine-y:30%}
:is(.summary-card,.batch-card,.dex-slot,.elite-promo>button):is(:hover,:focus-visible) .card-finish{--foil-strength:.55;--shine-x:70%;--shine-y:65%}
@media(max-width:750px){
 .inspection-modal{padding:14px;max-width:calc(100vw - 12px);border-radius:20px}.inspection-layout{grid-template-columns:1fr;gap:12px}
 .inspection-stage{--inspection-height:clamp(320px,53dvh,510px);margin-top:30px;border-radius:14px}.inspection-position{width:min(78%,300px,calc(var(--inspection-height)*.60))}
 .inspection-info{padding:10px 8px 0}.inspection-info h2{font-size:27px;margin:8px 0}.inspection-info .inspection-ownership{margin:14px 0}
 .inspection-settings{padding:0 8px}.inspection-browse{padding:0}.inspection-workbench #inspection-help{font-size:10px;padding:0 8px;margin-top:12px}.inspection-stage-label,.inspection-zoom{bottom:16px;font-size:8px}
 .inspection-lighting button{font-size:11px}.inspection-settings .inspection-label{margin-top:12px}
}
@media(prefers-reduced-motion:reduce){.card-tile:hover .card-frame,.card-tile:focus-visible .card-frame{transform:none}.card-frame,.inspection-stage,.inspection-card{transition:none}}
