/* INSPECT (B390, src/inspect.js): one item full screen over any screen. Design system: bh-ui.css tokens (--scrim, --surface-0/1,
   --line, --ink/-2/-3, --rarity-*, --yellow, --on-yellow, --radius-*, --space-*, --font-ui), components .bh-close (the X),
   .bh-tag (the rarity), .bh-price (the price), .bh-rarity-* (--rarity: the backdrop's light and the plate). Laid out at
   1920 x 1080 and scaled by --bh-k like the menu; a phone in landscape keeps the X and the plate at its thumb sizes (44 px).
   Under the ban screen (1000) and the rotate-your-phone screen, over everything else. */
.ins{position:fixed;inset:0;z-index:900;display:flex;flex-direction:column;align-items:center;color:var(--ink);font-family:var(--font-ui);
 --k:var(--bh-k,1);opacity:0;transition:opacity 140ms}
.ins.is-ready{opacity:1}
.ins-scrim{position:absolute;inset:0;background:radial-gradient(ellipse 60% 55% at 50% 42%,color-mix(in srgb,var(--rarity,var(--line-strong)) 30%,transparent),transparent 70%),var(--scrim);
 -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ins-x{position:absolute;top:max(16px,calc(24px * var(--k)));right:max(16px,calc(24px * var(--k)));z-index:2;width:max(44px,calc(64px * var(--k)));height:max(44px,calc(64px * var(--k)));
 font-size:max(28px,calc(40px * var(--k)))}
.ins-main{position:relative;flex:1 1 0;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;gap:calc(32px * var(--k));
 padding:max(16px,calc(32px * var(--k))) max(72px,calc(120px * var(--k))) 0}
.ins-stage{position:relative;height:100%;width:min(100%,calc(1100px * var(--k)));display:grid;place-items:center}
.ins-stage[data-3d="1"]{cursor:grab}
.ins-stage[data-3d="1"]:active{cursor:grabbing}
.ins-canvas{display:block;width:100%;height:100%}
/* the flat kinds: the picture as big as the room lets it */
.ins-pic{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 0 calc(24px * var(--k)) color-mix(in srgb,var(--rarity) 45%,transparent))}
.ins-clip{max-width:100%;max-height:100%;border-radius:var(--radius-lg);border:var(--border-strong) solid var(--rarity,var(--line));background:var(--surface-0)}
.ins-icon{display:block;width:min(56vh,calc(420px * var(--k)));aspect-ratio:1;border-radius:var(--radius-lg);background:var(--surface-3) center 10% / cover no-repeat}
.ins-frame{display:grid;place-items:center;width:min(56vh,calc(420px * var(--k)));aspect-ratio:1;border-radius:var(--radius-lg);background:var(--surface-2)}
.ins-frame .ins-icon{width:78%}
/* the frame's ring at the big size: the collection's ring (bh-lobby.css .st-frame-*) drawn three times thicker */
.ins-frame.st-frame-rare{box-shadow:inset 0 0 0 15px #2f6dff,0 0 30px rgba(47,109,255,.6)}
.ins-frame.st-frame-epic{box-shadow:inset 0 0 0 15px #8a3cff,0 0 36px rgba(138,60,255,.65)}
.ins-frame.st-frame-neon{box-shadow:inset 0 0 0 9px #fff,inset 0 0 0 18px #fc25c3,0 0 48px #fc25c3}
.ins-frame.st-frame-legendary{box-shadow:inset 0 0 0 12px #ffe27a,inset 0 0 0 21px #ffb81c,0 0 54px rgba(255,184,28,.8)}
.ins-frame.st-frame-streak30{box-shadow:inset 0 0 0 15px #ff7a10,0 0 48px rgba(255,122,16,.85)}
.ins-title{max-width:100%;padding:0 calc(24px * var(--k));font:italic 900 calc(120px * var(--k))/1 var(--font-ui);text-transform:uppercase;text-align:center;color:var(--rarity,var(--ink));
 -webkit-text-stroke:calc(4px * var(--k)) var(--surface-0);paint-order:stroke fill;filter:drop-shadow(0 0 calc(24px * var(--k)) color-mix(in srgb,var(--rarity) 50%,transparent))}
.ins-ico{font-size:calc(200px * var(--k));color:var(--ink-2)}
/* the kill effect's clip beside the body */
.ins-main.has-side .ins-stage{width:min(60%,calc(800px * var(--k)))}
.ins-side{margin:0;display:flex;flex-direction:column;gap:var(--space-2);width:min(36%,calc(560px * var(--k)))}
.ins-side .ins-clip{width:100%;aspect-ratio:16/9;object-fit:cover}
.ins-side figcaption{font-size:calc(22px * var(--k));font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
/* under the item: name, rarity, kind, source, price or state */
.ins-info{position:relative;display:flex;flex-direction:column;align-items:center;gap:calc(10px * var(--k));padding:calc(16px * var(--k)) var(--space-4) max(16px,calc(36px * var(--k)),env(safe-area-inset-bottom,0px))}
.ins-name{margin:0;font-size:calc(64px * var(--k));line-height:1;font-weight:900;text-transform:uppercase;letter-spacing:.01em;text-align:center}
.ins-name small{display:block;font-size:.42em;font-weight:800;letter-spacing:.12em;color:var(--ink-2)}
.ins-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:calc(14px * var(--k))}
.ins-meta .bh-tag{height:max(26px,calc(36px * var(--k)));font-size:max(14px,calc(22px * var(--k)))}
.ins-rar{background:var(--rarity);color:var(--on-yellow)}
.ins-kind,.ins-src{font-size:max(14px,calc(24px * var(--k)));font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.ins-src::before{content:"";display:inline-block;width:calc(6px * var(--k));height:calc(6px * var(--k));margin-right:calc(14px * var(--k));vertical-align:middle;border-radius:50%;background:var(--ink-3)}
.ins-price{pointer-events:none;height:max(36px,calc(48px * var(--k)));min-width:0;font-size:max(18px,calc(28px * var(--k)))}
.ins-state{display:inline-flex;align-items:center;gap:var(--space-1);height:max(36px,calc(48px * var(--k)));padding:0 calc(16px * var(--k));border-radius:var(--radius-sm);
 font-size:max(16px,calc(26px * var(--k)));font-weight:800;letter-spacing:.06em;text-transform:uppercase;border:var(--border-strong) solid var(--line-strong);background:var(--surface-1)}
.ins-state.is-owned{color:var(--green);border-color:color-mix(in srgb,var(--green) 55%,transparent)}
.ins-state.is-locked{color:var(--ink-2)}
.ins-hint{margin:0;font-size:max(13px,calc(20px * var(--k)));font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
html.bh-touch .ins-hint{display:none}
/* LEGENDARY: the reveal's gold plate (B373 variant 2: rewardfx.css :is(#rfx,#bhInspect) .rw-rar.is-legendary[data-v="2"], the colours, the
   bevel, the light running across, the pop); here only its size, to sit in the info line */
#bhInspect .ins-meta .rw-rar.is-legendary[data-v="2"]{display:inline-flex;align-items:center;height:max(28px,calc(42px * var(--k)));padding:0 calc(20px * var(--k));
 font-size:max(15px,calc(24px * var(--k)));font-weight:900;text-transform:uppercase;border-radius:calc(8px * var(--k))}
@media (prefers-reduced-motion: reduce){.ins{transition:none}}
/* a phone in landscape: the info in one line under a taller stage */
html.bh-phone .ins-main{padding:12px 64px 0}
html.bh-phone .ins-name{font-size:26px}
html.bh-phone .ins-info{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px 14px;padding:6px 64px max(10px,env(safe-area-inset-bottom,0px))}
html.bh-phone .ins-name small{display:inline;margin-right:8px;font-size:14px}
/* a title's picture is its words: the name line under it is only for the screen readers (the store's deal cards do the same) */
.ins-name.is-art{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* the store shut: the store's own COMING SOON tag (.bh-tag-yellow) at the state's height */
.ins-state.ins-soon{border:0;color:var(--on-yellow);background:var(--yellow)}