/* HiDoof preview · Library. Same light, shadows and card frames as the rest of the site;
   only realm headings, card codes, a discovery bar and the new-card arrival are added. */

/* particles + bursts (scene.js) */
.ambient{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.fxlayer{position:fixed;inset:0;width:100%;height:100%;z-index:150;pointer-events:none}
main,footer{position:relative;z-index:1}

/* discovery progress under the title */
.libprog{display:flex;align-items:center;gap:10px;margin:-2px 0 6px;font-size:13.5px;color:var(--mut)}
.libprog:empty{display:none}
.libprog b{color:var(--ink);font-weight:600}
.lpbar{display:block;width:140px;height:5px;border-radius:9px;background:#f1e8d3;overflow:hidden}
.lpbar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--gold),var(--gold2))}

/* toolbar: realm chips with their icon and count, sort, sound */
.chip .ri{display:inline-block;vertical-align:-3px;margin-right:6px}
.ri svg{width:15px;height:15px;fill:currentColor;stroke:currentColor;stroke-width:0;display:block}
.ri svg [fill=none]{stroke-width:1.6}
.chip .n{color:var(--mut);font-weight:400;margin-left:2px}
.lsel{appearance:none;-webkit-appearance:none;padding-right:30px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239a6f1c' stroke-width='1.5'/%3E%3C/svg%3E") right 12px center/10px 6px no-repeat}
#libsound[aria-pressed=true]{border-color:var(--gold);background:#fbf3de}

/* realm heading: same line as the old order heading, with the realm icon */
.realm-h{flex-wrap:wrap;row-gap:6px}
.realm-h .rname{display:inline-flex;align-items:center;gap:8px}
.realm-h .ri svg{width:18px;height:18px}

/* card caption: name, rarity, real card code */
.cap .ccode{display:block;margin-top:2px;font:500 11px/1.3 ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;color:var(--mut);letter-spacing:.01em;overflow-wrap:anywhere}
.cgrid .item{max-width:var(--w)}
.copies{position:absolute;top:8px;left:calc(50% - var(--w,172px)/2 + 6px);z-index:3;font:600 11px 'Inter',sans-serif;color:#fff;padding:3px 8px;border-radius:999px;background:rgba(28,28,28,.75);pointer-events:none}
.undisc{margin:30px 0 0;text-align:center;font-size:13.5px;color:var(--mut)}
.undisc a{color:var(--gold);text-decoration:none}
.undisc a:hover{text-decoration:underline}
.undisc span{color:var(--mut)}
.libmore{text-align:center;padding:18px;font-size:13px;color:var(--mut)}

/* loading placeholders */
.item.ghost .gcard{display:block;width:var(--w);aspect-ratio:540/840;border-radius:10px;background:linear-gradient(110deg,#efe5cc 8%,#fbf6e8 18%,#efe5cc 33%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.item.ghost .gline{display:block;width:60%;height:12px;border-radius:6px;background:#efe5cc}
.cgrid .item.ghost{--w:clamp(128px,23vw,172px)}

/* a new card: waits, then pops into its place with a glow in its rarity colour */
.item.pending .card,.item.pending .cap{opacity:0}
.item.arriving .card{animation:libPop .8s cubic-bezier(.2,1.3,.4,1) both}
.item.arriving .cap{animation:libFade .5s .35s ease-out both}
.item.arriving::before{content:"";position:absolute;left:50%;top:calc(var(--w,172px)*.78);width:calc(var(--w,172px)*1.5);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--rc) 55%,transparent),transparent);pointer-events:none;z-index:-1;animation:libGlow 1.1s ease-out forwards}
@keyframes libPop{0%{opacity:0;transform:translateY(-14px) scale(.82)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes libFade{from{opacity:0;transform:translateY(4px)}}
@keyframes libGlow{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}35%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.15)}}
.item.is-new::after{content:"New";position:absolute;top:8px;left:calc(50% - var(--w,172px)/2 - 4px);z-index:4;font:700 10px 'Inter',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#fff8e6;padding:3px 9px;border-radius:0 4px 4px 0;background:linear-gradient(#c79a35,#8f6a17);box-shadow:0 2px 8px rgba(120,90,30,.35);pointer-events:none}

/* card detail additions (inside the existing card dialog) */
.zlib{width:min(92vw,560px);display:grid;gap:8px;margin-top:-6px}
.zrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.zrealm{display:inline-flex;align-items:center;gap:6px;font:500 12.5px 'Inter',sans-serif;color:#f3e8cc;padding:4px 12px;border-radius:999px;border:1px solid rgba(229,206,150,.5);background:rgba(255,255,255,.06)}
.zrealm .ri{color:var(--ac)}
.zcode{font:500 13px ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;color:#f6e7bd;padding:4px 10px;border-radius:6px;background:rgba(0,0,0,.35);-webkit-user-select:all;user-select:all;overflow-wrap:anywhere}
.zcopy{min-height:32px;border-radius:999px;border:1px solid rgba(229,206,150,.6);background:transparent;color:#f3e8cc;font:500 12px 'Inter',sans-serif;padding:0 12px;cursor:pointer}
.zcopy:hover{background:rgba(229,206,150,.12)}
.zlore{font:400 13.5px/1.55 'Inter',sans-serif;color:#e8dcc0;text-align:left;max-height:24vh;overflow:auto}
.zlore summary{cursor:pointer;font:600 12px 'Inter',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#e5ce96;text-align:center;list-style:none}
.zlore summary::-webkit-details-marker{display:none}
.zlore p{margin:6px 0}.zlore b{display:block;font:600 11px 'Inter',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#e5ce96}
#zoom .zcard{width:min(92vw,540px,calc((100dvh - 330px)/1.5556));transition:width .25s ease,transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
#zoom.lore-open .zcard{width:min(92vw,540px,calc((76dvh - 330px)/1.5556))}

/* toast action button */
.toast .tact{pointer-events:auto;margin-left:10px;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.12);color:#fff;border-radius:999px;font:600 12.5px 'Inter',sans-serif;padding:4px 12px;cursor:pointer}

@media(max-width:600px){.lpbar{width:90px}.ctright{width:100%}.ctright .csearch{flex:1}.ctright .csearch input{width:100%}}
@media(prefers-reduced-motion:reduce){.item.arriving .card,.item.arriving .cap,.item.arriving::before,.item.ghost .gcard{animation:none!important}}

/* ---- card dialog: flies from the tapped card and back ---- */
#zoom.fly{animation:none}
#zoom.fly>*:not(.zstage){animation:rin .35s .12s ease-out both}
#zoom.closing>*:not(.zstage){opacity:0;transition:opacity .18s ease}
#zoom.closing .zcard{box-shadow:none}
.zcard{cursor:zoom-out}

/* ---- My orders: the cards you got, small and floating, with their rarity halo ---- */
.othumbs{display:flex;flex-wrap:wrap;gap:14px;margin:6px 0 12px;padding:8px 4px 10px}
.othumb{position:relative;width:76px;aspect-ratio:540/840;padding:0;border:0;background:none;cursor:zoom-in;border-radius:8px;animation:floaty 4s ease-in-out infinite;transition:scale .2s ease}
.othumb:hover{scale:1.06}
.othumb:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.othumb .oface{position:absolute;inset:0;display:block;border-radius:8px;overflow:hidden;background:#1b140c;box-shadow:0 8px 22px rgba(0,0,0,.25),0 0 0 1.5px #e3bf62}
.othumb img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease}
.othumb img.loaded{opacity:1}
/* the halo is the big card's halo scaled down: --k = small card width ÷ big card width (set by orderThumbScale) */
#ordersbody{--k:.2}
.othumb.fx .oface{overflow:visible;border-radius:max(3px,calc(10px*var(--k)));box-shadow:0 calc(8px*var(--k)) calc(22px*var(--k)) rgba(0,0,0,.4)}
/* halo: the big card's glow scaled down, 20% brighter */
.othumb.fx .oface::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 calc((3.2px + var(--ai)*8px)*var(--k)) calc(var(--ai)*1.2px*var(--k)) var(--gc),0 0 calc(var(--ai)*18.4px*var(--k)) calc(var(--ai)*-.8px*var(--k)) var(--g2);filter:brightness(1.2)}
.othumb.fx .oface img{border-radius:inherit}
.othumb.fx .oface::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 max(.6px,calc((1px + var(--ai)*1.5px)*var(--k))) var(--g2),inset 0 0 calc((2.4px + var(--ai)*6.4px)*var(--k)) calc(var(--ai)*1.6px*var(--k)) var(--gc);filter:brightness(1.5);z-index:1;animation:glowPulse var(--sp) ease-in-out infinite} /* edge line 50% brighter */
@media(max-width:600px){.othumbs{gap:12px}.othumb{width:64px}}
@media(prefers-reduced-motion:reduce){.othumb,.othumb.fx .oface::after{animation:none}}

/* ---- Library cards: gentle float, and the rarity halo of the big card scaled to this size ---- */
#colbody{--k:.3}
.cgrid .item .card{animation:libFloat 4.4s ease-in-out infinite;animation-delay:var(--fd,0s)}
@keyframes libFloat{50%{translate:0 -5px;rotate:-1.2deg}}
.cgrid .item.lfx.rar .card .face:not(.back){box-shadow:0 calc(8px*var(--k)) calc(22px*var(--k)) rgba(0,0,0,.4),0 0 calc((3.2px + var(--ai)*8px)*var(--k)) calc(var(--ai)*1.2px*var(--k)) color-mix(in srgb,var(--gc),#fff 20%),0 0 calc(var(--ai)*18.4px*var(--k)) calc(var(--ai)*-.8px*var(--k)) color-mix(in srgb,var(--g2),#fff 20%)}
.cgrid .item.lfx .card .face:not(.back)::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;box-shadow:inset 0 0 0 max(.7px,calc((1px + var(--ai)*1.5px)*var(--k))) var(--g2),inset 0 0 calc((2.4px + var(--ai)*6.4px)*var(--k)) calc(var(--ai)*1.6px*var(--k)) var(--gc);filter:brightness(1.5);animation:glowPulse var(--sp) ease-in-out infinite}
.cgrid .item.lfx.rar:hover .card .face:not(.back){box-shadow:0 14px 30px rgba(0,0,0,.28),0 0 calc((3.2px + var(--ai)*8px)*var(--k)*1.6) calc(var(--ai)*1.2px*var(--k)*1.6) color-mix(in srgb,var(--gc),#fff 20%),0 0 calc(var(--ai)*18.4px*var(--k)*1.6) 0 color-mix(in srgb,var(--g2),#fff 20%)}
/* grouping buttons */
.seg{display:inline-flex;gap:0}
.seg .chip{border-radius:0}
.seg .chip:first-child{border-radius:999px 0 0 999px}
.seg .chip:last-child{border-radius:0 999px 999px 0;margin-left:-1.5px}
.seg .chip[aria-pressed=true]{position:relative;z-index:1}
.rar-h .gem{display:inline-block;width:12px;height:12px;transform:rotate(45deg);border-radius:2px;background:linear-gradient(135deg,#fff 0%,var(--rc) 45%,color-mix(in srgb,var(--rc),#000 25%));box-shadow:0 0 8px color-mix(in srgb,var(--rc) 70%,transparent)}
html.calm .cgrid .item .card{animation:none}
@media(prefers-reduced-motion:reduce){.cgrid .item .card,.cgrid .item.lfx .card .face:not(.back)::after{animation:none}}
/* rarity sub-heading inside a character-type section */
.rsub{display:flex;align-items:center;gap:8px;margin:16px 0 10px;font:600 13px 'Inter',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.rsub small{font-weight:400;letter-spacing:0;color:var(--mut)}
.rsub .gem{display:inline-block;width:9px;height:9px;transform:rotate(45deg);border-radius:2px;background:linear-gradient(135deg,#fff 0%,var(--rc) 45%,color-mix(in srgb,var(--rc),#000 25%));box-shadow:0 0 6px color-mix(in srgb,var(--rc) 70%,transparent)}
.realm-h+.rsub{margin-top:0}