:root{
  --bg:#e8e5df;--ink:#141414;
  --pack:#2b3ff0;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --spring:linear(0,.055,.193,.378,.577,.767,.93,1.056,1.142,1.19,1.205,1.195,1.167,1.13,1.089,1.05,1.016,.99,.972,.961,.958,.96,.965,.973,.981,.989,.996,1.002,1.006,1.008,1);
  /* pouch is .69:1, cards are 5:7 and a bit narrower than the pouch so they fit inside it */
  --aspect:.69;--ph:min(420px,58vh,120vw);--pw:calc(var(--ph)*var(--aspect));--cw:calc(var(--pw)*.84);--ch:calc(var(--cw)*1.4);
  --crimp:calc(var(--ph)*.068);--d:22px;
  --holo:1;--glare:1;
  --rainbow:repeating-linear-gradient(110deg,#ff7aa8 0%,#ffcf6b 5%,#a8ff8a 10%,#6be2ff 15%,#9b8cff 20%,#ff7aa8 25%);
  --grain:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='2' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 11 0 0 0 -5.3'/></filter><rect width='200' height='200' filter='url(%23g)'/></svg>");
  --bump:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='b' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='1.25' numOctaves='3' seed='4' stitchTiles='stitch'/><feDiffuseLighting surfaceScale='5' diffuseConstant='1' lighting-color='white'><feDistantLight azimuth='225' elevation='30'/></feDiffuseLighting></filter><rect width='150' height='150' filter='url(%23b)'/></svg>");
  --glitter:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.8' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 14 0 0 0 -8.6'/></filter><rect width='160' height='160' filter='url(%23g)'/></svg>");
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
html{overscroll-behavior:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}   /* every control has its own pressed look */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}   /* iOS would blow the type up when the phone is turned on its side */
body{overflow:hidden;background:radial-gradient(120% 90% at 50% 38%,#f3f1ec,var(--bg) 58%,#d8d4cb);color:var(--ink);
  font-family:-apple-system,"SF Pro Text",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
i{font-style:normal}

/* one 3D context, so the pack's front face really does hide the cards inside it */
.stage{position:fixed;inset:0;overflow:hidden;touch-action:none;perspective:1400px;perspective-origin:50% 40%;user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none}   /* iOS: a finger held still on a card or a pack in the row would bring up the image's Save/Copy/Share menu (and cancel the pointer) */
/* iOS only turns a tap into a click on something that looks clickable (a click listener on it or an ancestor below <body>, or a pointer cursor): the engine hears
   clicks on window (a card on the table brought up close, a picked pack put back by a tap on nothing), so on a touch screen the whole stage says it is clickable */
@media (hover:none){.stage{cursor:pointer}}
.scene{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.scene.flat{transform-style:flat;perspective:1400px;perspective-origin:50% 40%}   /* once the cards are out, z-index decides what overlaps */
.hit,.card{pointer-events:auto}
.pack,.card,.flow{position:absolute;left:50%;top:50%;transform-style:preserve-3d;will-change:transform}
.pack,.flow{width:var(--pw);height:var(--ph);margin:calc(var(--ph)/-2) 0 0 calc(var(--pw)/-2)}
.flow{pointer-events:none}
.rays{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;transform:translateZ(-5px)}
.ground{position:absolute;left:50%;top:50%;width:calc(var(--pw)*.95);height:calc(var(--pw)*.16);margin:calc(var(--pw)*-.08) 0 0 calc(var(--pw)*-.475);
  border-radius:50%;background:radial-gradient(closest-side,rgb(30 25 15/.3),transparent);filter:blur(6px)}

/* ---------- foil skin, shared by both faces and by every slice of the tear strip ---------- */
.skin{position:absolute;inset:0;backface-visibility:hidden;transform:translateZ(calc(var(--d)/2))}
/* the print is kept apart from the skin it is on, so the strip can come off along a different edge than the artwork's top (see .tear-side) */
.print{position:absolute;inset:0;isolation:isolate;--tooth:calc(var(--pw)/26);
  background:
    linear-gradient(90deg,rgb(255 255 255/.10),transparent 9%,transparent 90%,rgb(0 0 0/.16) 98%) 0 50%/100% calc(100% - 2*var(--crimp)) no-repeat,
    repeating-linear-gradient(90deg,rgb(0 0 0/.18) 0 1px,rgb(255 255 255/.08) 1px 2px,transparent 2px 5px) 0 0/100% var(--crimp) no-repeat,
    repeating-linear-gradient(90deg,rgb(0 0 0/.18) 0 1px,rgb(255 255 255/.08) 1px 2px,transparent 2px 5px) 0 100%/100% var(--crimp) no-repeat,
    var(--pack);
  --teeth-top:conic-gradient(from 135deg at 50% 0,#0000,#000 1deg 89deg,#0000 90deg) 0 0/var(--tooth) calc(var(--tooth)/2) repeat-x;
  --teeth-bot:conic-gradient(from -45deg at 50% 100%,#0000,#000 1deg 89deg,#0000 90deg) 0 100%/var(--tooth) calc(var(--tooth)/2) repeat-x;
  -webkit-mask:var(--teeth-top),linear-gradient(#000 0 0) 0 50%/100% calc(100% - var(--tooth) + 1px) no-repeat,var(--teeth-bot);
  mask:var(--teeth-top),linear-gradient(#000 0 0) 0 50%/100% calc(100% - var(--tooth) + 1px) no-repeat,var(--teeth-bot)}
.skin.back{transform:rotateY(180deg) translateZ(calc(var(--d)/2))}
.print::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
/* a glint down the left edge that slides as the pack turns */
.print::before{background:linear-gradient(90deg,transparent 2.4%,rgb(255 255 255/.7) 3%,rgb(255 255 255/.28) 5%,transparent 9%);
  -webkit-mask:linear-gradient(transparent 7%,#000 13% 48%,transparent 84%);mask:linear-gradient(transparent 7%,#000 13% 48%,transparent 84%);
  translate:calc(var(--gx,0)*1%) 0;opacity:var(--gl,.8)}
.rims{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
/* a band of light that crosses the wrapper once as the pack is picked up */
.sheen{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;mix-blend-mode:screen;background:linear-gradient(112deg,#0000 38%,rgb(255 255 255/.55) 48%,rgb(255 255 255/.9) 50%,rgb(255 255 255/.55) 52%,#0000 62%) 0 0/300% 100% no-repeat}
.rim{position:absolute}   /* rounded sides, built in script: strips stacked through the pouch's depth, each bulging a little further out toward the middle */
/* the fill inside the pouch pushes its face out: light pools on the swell and follows the tilt, and the foil falls into shadow where it is pinched into the seals and round the sides */
.bulge{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(58% 40% at calc(var(--lx,50)*1%) calc(var(--ly,42)*1%),rgb(255 255 255/.2),rgb(255 255 255/.05) 55%,#0000 78%),
  linear-gradient(90deg,rgb(0 0 0/.3),#0000 13%,#0000 86%,rgb(0 0 0/.36)),
  linear-gradient(#0000 var(--crimp),rgb(0 0 0/.3) calc(var(--crimp) + .5%),#0000 calc(var(--crimp) + 9%),#0000 calc(100% - var(--crimp) - 10%),rgb(0 0 0/.34) calc(100% - var(--crimp) - .5%),#0000 calc(100% - var(--crimp)))}

/* the foil's relief, lit (engine/wrinkle.js): .x and .y are its slope across and down as light and shade, each showing the half of its picture that suits the side the
   light is on, as strongly as the light leans that way; .s are two frames of glints cross-fading. only these opacities and positions change from frame to frame */
.wr,.wr i{position:absolute;inset:0;pointer-events:none}
.wr{z-index:1;--wk:calc(var(--wrinkle,1)*var(--wrinkle-k,1))}
.wr i{background-repeat:no-repeat}
.wr .x{background-image:var(--wr-x,none);background-size:200% 100%;background-position:calc(var(--wsx,0)*100%) 0;opacity:calc(var(--wax,.3)*var(--wk))}
.wr .y{background-image:var(--wr-y,none);background-size:200% 100%;background-position:calc(var(--wsy,0)*100%) 0;opacity:calc(var(--way,.34)*var(--wk))}
.wr .s{background-image:var(--wr-s,none);background-size:500% 100%}
.wr .a{background-position:calc(var(--wia,0)*25%) 0;opacity:calc(var(--woa,0)*var(--wk))}
.wr .b{background-position:calc(var(--wib,1)*25%) 0;opacity:calc(var(--wob,0)*var(--wk))}
.skin.back .wr,.skin.foil .wr{transform:scaleX(-1)}   /* turned round, the same sheet's wrinkles run the other way and so does the light */

.fin{position:absolute;left:45%;width:10%;top:0;bottom:0;background:repeating-linear-gradient(rgb(0 0 0/.14) 0 1px,transparent 1px 4px),linear-gradient(90deg,rgb(0 0 0/.3),rgb(255 255 255/.18) 45%,rgb(0 0 0/.22))}

/* ---------- tear strip: slices hinged one to the next, so the loose end curls and shows the silver inside ---------- */
.flap{position:absolute;inset:0;transform-style:preserve-3d;visibility:hidden}
.flap.on{visibility:visible}
.ply{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:0 0}
.ply .front{transform:translateZ(.4px)}
.skin.foil{transform:rotateY(180deg) translateZ(.4px)}
.skin.foil .print{background:linear-gradient(97deg,#e3e8f2,#fff 12%,#cfd7e6 26%,#fff 44%,#dbe1ee 58%,#fff 76%,#d3dbe9)}
.skin.foil .print::before{display:none}
.tone{position:absolute;inset:0;z-index:3;background:#0b0d1c;opacity:0}
/* torn edge: the bright metal layer of the foil, with a hairline shadow on the print */
.lips{position:absolute;inset:0;z-index:2;filter:drop-shadow(0 1.5px 1.2px rgb(0 0 0/.42))}
.lip{position:absolute;inset:0;z-index:2;clip-path:polygon(0 0);background:linear-gradient(100deg,#f4f6fb,#fff 14%,#bfc8da 27%,#fff 42%,#c9d1e1 58%,#fbfcff 72%,#b9c2d4 86%,#eef1f7)}
.hit{position:absolute;inset:-24px -16px -8px;margin:0;padding:0;border:0;border-radius:14px;background:none;appearance:none;cursor:grab;touch-action:none;
  transform:translateZ(calc(var(--d)/2 + 1px));-webkit-tap-highlight-color:transparent}
.hit:focus-visible{outline:2px solid #0a84ff;outline-offset:8px}
.held .hit,.tug .hit{cursor:grabbing}

/* ---------- cards ---------- */
.card{width:var(--cw);height:var(--ch);margin:calc(var(--ch)/-2) 0 0 calc(var(--cw)/-2);touch-action:none;--px:50;--py:50;--hyp:0}
.face{position:absolute;inset:0;border-radius:calc(var(--cw)*.05)}
.face{overflow:hidden;isolation:isolate}
/* foil: the rainbow follows the tilt, glitter catches it, glare sits where the light lands */
.holo,.glare{position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none}
.holo{background:var(--rainbow) calc(var(--px)*1%) calc(var(--py)*1%)/400% 400%;mix-blend-mode:color-dodge;opacity:calc((.3 + var(--hyp)*.6)*var(--holo));filter:brightness(.7) contrast(1.5) saturate(1.4)}
.holo::after{content:"";position:absolute;inset:0;border-radius:inherit;background:inherit;-webkit-mask:var(--glitter) 0 0/140px 140px;mask:var(--glitter) 0 0/140px 140px;filter:brightness(1.8)}
.glare{background:radial-gradient(farthest-corner circle at calc(var(--px)*1%) calc(var(--py)*1%),rgb(255 255 255/.8),rgb(255 255 255/.12) 38%,rgb(0 0 0/.3));mix-blend-mode:overlay;opacity:calc((.25 + var(--hyp)*.55)*var(--glare))}

/* the light behind a Magic pack as it opens: a hot glow where the mouth is and two fans of rays turning against each other */
:root{--a1:#ff4fa3;--a2:#b46bff;--a3:#5aa8ff;--a4:#ff6a4a;--bolt:#7fc4ff}
.aura{position:fixed;inset:0;overflow:hidden;pointer-events:none;opacity:0;--ax:50vw;--ay:40vh;--bo:0;--gs:1}
.aura>*{position:absolute;left:var(--ax);top:var(--ay)}
.aura .glow{width:90vmin;height:70vmin;margin:-35vmin -45vmin;scale:var(--gs);background:radial-gradient(closest-side,rgb(255 248 255/.95),color-mix(in srgb,var(--a1) 60%,#0000) 28%,color-mix(in srgb,var(--a2) 30%,#0000) 60%,#0000)}
/* the fans are only as big as their mask lets them show (it is clear past 62% of the old 260vmax), and drawn at a quarter of that and scaled up: every pixel of a
   turning layer is memory, ~170 MB each at 260vmax on a 3x phone, and WebKit keeps a layer's pixels at its own size, not its scaled one (the soft rays do not show it).
   and while the aura is off (engine/effects.js puts .on on it) there is nothing in it at all, so nothing is kept turning or held in memory behind an invisible layer */
.aura:not(.on){display:none}
.aura .b1,.aura .b2{width:40.3vmax;height:40.3vmax;margin:-20.15vmax;scale:4;opacity:var(--bo);-webkit-mask:radial-gradient(closest-side,#000 6.45%,rgb(0 0 0/.5) 35.5%,#0000 100%);mask:radial-gradient(closest-side,#000 6.45%,rgb(0 0 0/.5) 35.5%,#0000 100%);animation:auraspin 70s linear infinite}
.aura .b1{background:repeating-conic-gradient(#0000 0 5deg,color-mix(in srgb,var(--a1) 55%,#0000) 7deg,#0000 10deg,color-mix(in srgb,var(--a3) 50%,#0000) 15deg,#0000 19deg,color-mix(in srgb,var(--a2) 45%,#0000) 22deg,#0000 27deg,color-mix(in srgb,var(--a4) 35%,#0000) 29deg,#0000 36deg)}
.aura .b2{background:repeating-conic-gradient(#0000 0 8deg,rgb(255 255 255/.4) 9.5deg,#0000 12deg,color-mix(in srgb,var(--a2) 40%,#0000) 20deg,#0000 24deg);animation-duration:46s;animation-direction:reverse}
@keyframes auraspin{to{rotate:360deg}}
.flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--ax,50%) var(--ay,40%),#fff,color-mix(in srgb,var(--a1) 35%,rgb(255 255 255/.9)) 26%,color-mix(in srgb,var(--a2) 50%,#0000) 70%,rgb(40 30 80/.2))}
.ring{position:absolute;width:40vmin;height:40vmin;margin:-20vmin;border-radius:50%;border:3px solid #fff;box-shadow:0 0 34px 10px color-mix(in srgb,var(--a1) 80%,#0000),inset 0 0 34px 10px color-mix(in srgb,var(--a3) 70%,#0000);pointer-events:none}
.bolt{fill:none;stroke:#fff;stroke-width:.5;stroke-linejoin:round;stroke-linecap:round}
.bolt.glow{stroke:var(--bolt);stroke-width:2;opacity:.5}
.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* ---------- chrome ---------- */
/* the shell's top bar (public/shell.css) says how tall it is in --bar-h, the same figure; this stands in until that stylesheet is in */
:root{--bar-h:calc(60px + env(safe-area-inset-top,0px))}
/* under the table: sell or keep the card held up close; otherwise sell all or open another. Share sits apart: to the right of the
   buttons on a wide screen, over their right end on a phone */
.dock{position:fixed;left:50%;bottom:max(24px,5vh);translate:-50% 0;z-index:6;display:flex;gap:8px;width:max-content;max-width:calc(100vw - 24px)}
.dock-row{display:flex;gap:8px}
.dock .again{position:static;translate:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;text-decoration:none}
.dock-row>*,.dock .share{animation:dock-in .35s var(--ease-out) both}
.dock-row>:nth-child(2){animation-delay:40ms}.dock .share{animation-delay:90ms}
@keyframes dock-in{from{opacity:0;translate:0 8px}}
.again.sell{background:#ffe9a8;border-color:rgb(120 80 0/.25)}
.again.sell b{font-variant-numeric:tabular-nums}
.again.keep{background:rgb(255 255 255/.14);color:#fff;border-color:rgb(255 255 255/.18);box-shadow:0 10px 24px -12px rgb(0 0 0/.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.dock .share{position:absolute;left:calc(100% + 14px);top:50%;margin-top:-22px;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px 0 12px;border-radius:22px;
  color:rgb(255 255 255/.78);font-size:14.5px;text-decoration:none;white-space:nowrap;transition:color .2s,background .2s}
.dock .share svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dock .share:focus-visible{outline:2px solid rgb(255 255 255/.7);outline-offset:2px}
@media (hover:hover){.again.keep:hover{background:rgb(255 255 255/.22)}.dock .share:hover{color:#fff;background:rgb(255 255 255/.1)}}
@media (max-width:760px){
  .dock{bottom:max(14px,calc(env(safe-area-inset-bottom) + 8px));flex-direction:column;align-items:stretch;width:min(calc(100vw - 32px),400px)}
  .dock-row>*{flex:1 1 0;min-width:0}
  .again{font-size:14.5px;padding:11px 14px}
  /* a round button in the gap between the buttons and the caption, lined up with their right edge */
  .dock .share{left:auto;right:0;top:auto;bottom:calc(100% + 10px);margin:0;width:44px;padding:0;justify-content:center;border-radius:50%;
    color:#fff;background:rgb(255 255 255/.12);box-shadow:0 0 0 1px rgb(255 255 255/.16) inset;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .dock .share span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  body:has(.dock-row) .mute{opacity:0;pointer-events:none}   /* the dock needs the bottom of a phone's screen */
}
.again{position:fixed;left:50%;bottom:max(24px,5vh);translate:-50% 0;white-space:nowrap;font:inherit;font-size:15px;padding:12px 18px;border-radius:12px;background:#fff;color:var(--ink);cursor:pointer;
  border:1px solid rgb(0 0 0/.1);box-shadow:0 1px 0 rgb(255 255 255/.9) inset,0 1px 2px rgb(0 0 0/.06),0 10px 24px -12px rgb(0 0 0/.25);transition:opacity .3s var(--ease-out),scale .16s var(--ease-out)}
@starting-style{.again{opacity:0}}
.again:active{scale:.97}
/* reveal all: in the middle of the top bar, between the credits and the player's buttons (on a phone, under the bar on the right) */
.again.all{bottom:auto;top:calc(var(--bar-h) - 52px);z-index:11;font-size:13px;padding:0 16px;min-height:44px;border-radius:999px;background:rgb(255 255 255/.92)}
@media (max-width:760px){.again.all{left:auto;right:12px;translate:none;top:calc(var(--bar-h) + 6px)}}
.mute{position:fixed;left:12px;bottom:12px;width:30px;height:30px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:rgb(255 255 255/.08);color:rgb(255 255 255/.55);cursor:pointer;opacity:.7;transition:opacity .2s}
.mute:hover,.mute:focus-visible{opacity:1;background:rgb(255 255 255/.16)}
.mute::after{content:"";position:absolute;inset:-8px}   /* a finger-sized target round the small button */
.mute svg{width:15px;height:15px}
.mute .off,.mute[aria-pressed="true"] .on{display:none}
.mute[aria-pressed="true"] .off{display:block}
@media (max-width:760px){.tp-dfwv{top:calc(var(--bar-h,60px) + 44px)!important;width:min(300px,calc(100vw - 16px))!important;max-height:calc(100vh - 120px)!important}.h-name{font-size:17px}}
.tp-dfwv{width:300px!important;max-height:calc(100vh - 16px);overflow:auto;z-index:20}
/* ---------- the shelf: every set's pack in a row, oldest on the left. the one in the middle is the live pack; the rest are pictures that bring theirs to the middle when pressed ---------- */
.shelf{position:absolute;inset:0;pointer-events:none;transition:opacity .3s;--gap:var(--pw)}   /* --cur and --gap are driven every frame by the script: the row is one continuous scroll */
.shelf.off{opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
.shelf button{position:absolute;left:50%;top:50%;height:calc(var(--ph)*.76);aspect-ratio:var(--as,.53);padding:0;border:0;background:none;color:#fff;cursor:pointer;pointer-events:auto;opacity:calc(var(--o,.5)*var(--dim,1));-webkit-tap-highlight-color:transparent;
  translate:calc(-50% + (var(--i) - var(--cur,0))*var(--gap) + var(--side,0)*var(--push,0px)) -50%;transition:scale .25s var(--ease-out)}
.shelf button:hover,.shelf button:focus-visible{opacity:.95;scale:1.04;outline:0}
.shelf:not(.away) button[aria-current="true"]{opacity:0;pointer-events:none}   /* the live pack stands in this one's place */
.shelf img,.shelf .blank{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 16px rgb(0 0 0/.5));-webkit-user-drag:none}
.shelf .blank{border-radius:4px}
/* the row is a little untidy: each pack hangs slightly high or low, leans, and bobs slowly. --k fades all of it out toward the middle, where the live pack takes over standing straight */
.shelf button{--k:min(1,max(var(--i) - var(--cur,0),var(--cur,0) - var(--i)))}
.shelf img,.shelf .blank{rotate:calc(var(--k)*var(--rot,0deg));animation:shelf-bob var(--dur,4s) var(--del,0s) ease-in-out infinite alternate}
@keyframes shelf-bob{from{translate:0 calc(var(--k)*var(--ph)*(var(--dy,0)*.022 - .008))}to{translate:0 calc(var(--k)*var(--ph)*(var(--dy,0)*.022 + .008))}}
@media (prefers-reduced-motion:reduce){.shelf img,.shelf .blank{animation:none;translate:0 calc(var(--k)*var(--ph)*var(--dy,0)*.022)}}
.shelf span{position:absolute;left:50%;top:100%;translate:-50% 12px;white-space:nowrap;font:600 12px/1.5 system-ui,sans-serif;color:rgb(255 255 255/.85)}
.shelf span b{display:block;font-weight:500;color:rgb(255 255 255/.55);font-variant-numeric:tabular-nums}
/* just under the top bar (public/shell.css), which has the credits on the left and the player's buttons on the right: the shelf's options behind
   the sliders, then a year to jump to (in the price order, a rough price). --pk is how tall the bar is */
.picker{position:fixed;left:50%;translate:-50% 0;top:calc(var(--bar-h,60px) + 6px);z-index:9;display:flex;align-items:center;gap:6px;max-width:min(calc(100vw - 24px),1100px);transition:opacity .25s;--pk:29px}
.picker[hidden]{display:none}
.picker.off{opacity:0;visibility:hidden}
.years{position:relative;display:flex;min-width:0;overflow-x:auto;scrollbar-width:none;gap:1px;padding:3px;border-radius:999px;background:rgb(255 255 255/.08);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--fl,0px),#000 calc(100% - var(--fr,0px)),transparent)}
.years::-webkit-scrollbar{display:none}
.years button{flex:none;font:600 11px/1 system-ui,sans-serif;font-variant-numeric:tabular-nums;padding:6px 5px;border:0;border-radius:999px;background:none;color:rgb(255 255 255/.5);cursor:pointer}
.years button[data-price]{padding-inline:7px}
.years button:hover{color:#fff}
.years button[aria-current="true"]{background:#fff;color:#111}
.opts-btn{position:relative;flex:none;width:var(--pk);height:var(--pk);display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:rgb(255 255 255/.08);color:rgb(255 255 255/.6);cursor:pointer;-webkit-tap-highlight-color:transparent}
.opts-btn::after{content:"";position:absolute;inset:calc((var(--pk) - 44px)/2) 0 calc((var(--pk) - 44px)/2) calc(var(--pk) - 44px)}   /* a finger-sized target, reaching out to the left and up and down, not over the bar */
.opts-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.opts-btn:hover,.opts-btn[aria-expanded="true"]{color:#fff;background:rgb(255 255 255/.16)}
.opts-btn:focus-visible,.opts button:focus-visible,.years button:focus-visible{outline:2px solid rgb(255 255 255/.7);outline-offset:2px}
.opts-btn.on::before{content:"";position:absolute;top:1px;right:1px;width:7px;height:7px;border-radius:50%;background:#ffd98a;box-shadow:0 0 0 2px #1d1b2a}   /* an option is not as it starts */
.opts{position:absolute;left:0;top:calc(100% + 8px);width:max-content;min-width:250px;max-width:calc(100vw - 24px);padding:6px;border-radius:16px;background:rgb(26 24 36/.94);border:1px solid rgb(255 255 255/.12);
  box-shadow:0 18px 40px -12px rgb(0 0 0/.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font:500 14px/1.2 system-ui,sans-serif;color:#f3f0f6;transform-origin:16px 0;animation:opts-in .16s var(--ease-out,ease-out)}
@keyframes opts-in{from{opacity:0;scale:.96;translate:0 -4px}}
.opt{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:48px;padding:0 4px 0 10px}
.opt+.opt{border-top:1px solid rgb(255 255 255/.08)}
.seg{display:flex;padding:2px;border-radius:999px;background:rgb(255 255 255/.08)}
.seg button{min-height:40px;padding:0 14px;border:0;border-radius:999px;background:none;color:rgb(255 255 255/.6);font:600 13px/1 system-ui,sans-serif;cursor:pointer}
.seg button[aria-pressed="true"]{background:#fff;color:#111}
.opt.sw{width:100%;border:0;border-radius:10px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;padding-right:10px}
.opt.sw:hover{background:rgb(255 255 255/.05)}
.opt.sw i{position:relative;flex:none;width:42px;height:26px;border-radius:13px;background:rgb(255 255 255/.18);transition:background .2s}
.opt.sw i::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(0 0 0/.4);transition:translate .2s var(--ease-out,ease-out)}
.opt.sw[aria-checked="true"] i{background:#5fbf7a}
.opt.sw[aria-checked="true"] i::after{translate:16px 0}
@media (max-width:760px){
  .picker{--pk:35px;width:calc(100vw - 24px);justify-content:center}
  .years button{padding:9px 6px}.years button[data-price]{padding-inline:8px}.shelf span{display:none}
  .opts{width:min(340px,calc(100vw - 24px))}
}
.shelf span em{font-style:normal}
.shelf span em.short{color:#ff7d6e}

/* ---------- Magic: The Gathering sets ---------- */
/* every Magic set shares these rules; what differs between sets (the wrapper, its shape and colours, the page and effect colours) arrives as custom properties from its set.js */
.mtg{--ph:min(520px,62vh,180vw);--crimp:calc(var(--ph)*var(--crimp-k,.07))}
/* iOS Safari's vh is the viewport with its toolbars hidden, which this page (it never scrolls) never gets: the pack would be ~12% too tall for what shows, up under the year bar and down behind its plate. svh is what actually shows */
@supports (height:1svh){.mtg{--ph:min(520px,62svh,180vw)}}
.mtg body{background:radial-gradient(120% 90% at 50% 38%,var(--bg1,#3a3242),var(--bg2,#1d1922) 58%,var(--bg3,#0d0b10));color:#eee}
.mtg .ground{background:radial-gradient(closest-side,rgb(0 0 0/.55),transparent)}
/* a real booster's seals are pinked much finer than the toy pack's, the ridges are finer and the foil is darker */
.mtg .print{--tooth:calc(var(--pw)/46);background:
  repeating-linear-gradient(90deg,rgb(0 0 0/.3) 0 1px,rgb(255 255 255/.07) 1px 2px,transparent 2px 4px) 0 0/100% var(--crimp) no-repeat,
  repeating-linear-gradient(90deg,rgb(0 0 0/.3) 0 1px,rgb(255 255 255/.07) 1px 2px,transparent 2px 4px) 0 100%/100% var(--crimp) no-repeat,
  var(--pack)}
.mtg .skin.foil .print{background:linear-gradient(97deg,#e3e8f2,#fff 12%,#cfd7e6 26%,#fff 44%,#dbe1ee 58%,#fff 76%,#d3dbe9)}
.mtg .bulge{background:
  radial-gradient(64% 44% at calc(var(--lx,50)*1%) calc(var(--ly,42)*1%),rgb(255 255 255/calc(.3*var(--bulge,1))),rgb(255 255 255/calc(.09*var(--bulge,1))) 52%,#0000 80%),
  radial-gradient(90% 60% at calc(100% - var(--lx,50)*1%) calc(104% - var(--ly,42)*1%),#0000 40%,rgb(0 0 0/calc(.3*var(--bulge,1)))),
  linear-gradient(90deg,rgb(0 0 0/calc(.5*var(--bulge,1))),rgb(0 0 0/calc(.12*var(--bulge,1))) 7%,#0000 19%,#0000 80%,rgb(0 0 0/calc(.14*var(--bulge,1))) 93%,rgb(0 0 0/calc(.55*var(--bulge,1)))),
  linear-gradient(#0000 var(--crimp),rgb(0 0 0/calc(.55*var(--bulge,1))) calc(var(--crimp) + .4%),rgb(0 0 0/calc(.16*var(--bulge,1))) calc(var(--crimp) + 4%),#0000 calc(var(--crimp) + 12%),#0000 calc(100% - var(--crimp) - 13%),rgb(0 0 0/calc(.2*var(--bulge,1))) calc(100% - var(--crimp) - 4%),rgb(0 0 0/calc(.6*var(--bulge,1))) calc(100% - var(--crimp) - .4%),#0000 calc(100% - var(--crimp)))}
/* torn down the side instead: the pouch is built lying on its side and turned upright, so the strip's edge is a long one; the print and the rounded sides are turned back */
.tear-side .pack,.tear-side .flow{width:var(--ph);height:var(--pw);margin:calc(var(--pw)/-2) 0 0 calc(var(--ph)/-2)}
.tear-side .print,.tear-side .rims{inset:auto;left:50%;top:50%;width:var(--pw);height:var(--ph);margin:calc(var(--ph)/-2) 0 0 calc(var(--pw)/-2);transform:rotate(calc(var(--side,1)*-90deg))}
.tear-side .skin.back .print,.tear-side .skin.foil .print{transform:rotate(calc(var(--side,1)*90deg))}
/* each slice of the strip is only as big as its own patch of the pouch, which it is clipped to anyway: pouch-sized, its two faces were 24 pouch-sized layers
   (130 MB and more on a 3x phone) all painting the whole wrapper. The print inside is still laid out over the whole pouch, so the picture lines up.
   tear.js sets, in % of the pouch: --x where the patch starts, --w how wide it is, --o where it starts counted from the print's own left (the foil is turned round).
   The patch is the top 32% (STRIP in tear.js): deeper than any tear line goes */
.ply .skin{inset:auto;left:calc(var(--x,0)*1%);width:calc(var(--w,100)*1%);top:0;height:32%;overflow:hidden}
.ply .print{inset:auto;left:calc(var(--o,0)*-100%/var(--w,100));top:0;width:calc(100%*100/var(--w,100));height:calc(100%*100/32)}
.tear-side .ply .print{left:calc((50 - var(--o,0))*100%/var(--w,100));top:calc(100%*50/32);width:var(--pw);height:var(--ph)}
/* the real wrapper: the publisher's own picture of the pack, which also gives the pouch its outline */
.m-photo{position:absolute;inset:0;background:var(--wrap) center/100% 100% no-repeat}
.wrapped .print{-webkit-mask:var(--wrap) center/100% 100% no-repeat;mask:var(--wrap) center/100% 100% no-repeat}
.wrapped .rims{inset:0 calc(var(--rr,0)*1%) 0 calc(var(--rl,0)*1%)}   /* the picture's body is a little narrower than its seals, so the rounded sides sit in from the edge */
.wrapped.tear-side .rims{inset:auto;width:calc(var(--pw)*(100 - var(--rl,0) - var(--rr,0))/100);margin-left:calc(var(--pw)*(var(--rl,0)/100 - .5))}
.m-art{position:absolute;left:0;right:0;top:var(--crimp);bottom:var(--crimp);background:
  linear-gradient(var(--pack),#0000 15%,#0000 60%,var(--pack) 84%),
  radial-gradient(70% 34% at 14% 52%,color-mix(in srgb,var(--a4) 80%,#0000),#0000 70%),
  radial-gradient(70% 38% at 72% 44%,color-mix(in srgb,var(--a3) 75%,#0000),#0000 70%),
  radial-gradient(40% 22% at 46% 60%,rgb(255 235 255/.5),#0000 70%),var(--pack)}
.m-logo{position:absolute;left:0;right:0;top:18.5%;text-align:center;color:#fff;text-shadow:0 2px 6px rgb(0 0 0/.5)}
.m-logo b{display:block;font:700 calc(var(--pw)*.155)/1 "Cinzel","Trajan Pro","Hoefler Text","Times New Roman",serif;letter-spacing:.05em}
.m-logo span{display:block;margin-top:.3em;font:700 calc(var(--pw)*.03)/1 system-ui,sans-serif;letter-spacing:.34em;margin-right:-.34em;text-transform:uppercase}
.m-title{position:absolute;left:6%;right:6%;bottom:calc(var(--crimp) + 5%);text-align:center;color:#fff;text-transform:uppercase;text-shadow:0 2px 8px rgb(0 0 0/.6);font:900 calc(var(--pw)*.09)/1.1 system-ui,sans-serif;letter-spacing:.03em}
.m-back{position:absolute;left:12%;right:12%;top:30%;text-align:center;color:rgb(255 255 255/.8);font:500 calc(var(--pw)*.04)/1.5 system-ui,sans-serif}

/* --r: the corner's radius as a share of the card's width. a set whose cards are rounder than the rest gives its own (set.js cards.radius, put on the card by engine/cards.js) */
.card.mtg .face{border-radius:calc(var(--cw)*var(--r,.0475));background:#15131a;backface-visibility:hidden;box-shadow:0 8px 14px -9px rgb(0 0 0/.6)}
.card.mtg .face.flip{transform:rotateY(180deg)}
/* a two-faced card wears a turn-over badge on its corner, one for each side so it is there whichever face is up */
.flipbtn{position:absolute;right:-5%;top:-3.5%;width:17%;aspect-ratio:1;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:rgb(22 18 30/.9);color:#fff;cursor:pointer;pointer-events:auto;
  transform:translateZ(1px);backface-visibility:hidden;box-shadow:0 0 0 1.5px rgb(255 255 255/.75),0 3px 8px rgb(0 0 0/.55);transition:background .15s}
.flipbtn.b{transform:rotateY(180deg) translateZ(1px)}
.flipbtn:hover{background:#6a3df0}
.flipbtn svg{width:62%;height:62%}
.card.under .flipbtn{display:none}
/* a card you have turned up wears its price, and the dearer it is the more it glows and glints: --v runs 0 (pennies) to 1 (hundreds), --vc is its tier's colour */
.worth{position:absolute;left:50%;bottom:-3.5%;translate:-50% 0;transform:translateZ(1px);backface-visibility:hidden;padding:.28em .7em;border-radius:99px;background:rgb(16 13 22/.93);color:var(--vc,#aaa);
  font:700 calc(var(--cw)*.078)/1 system-ui,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--vc,#888) 70%,#0000),0 3px 8px rgb(0 0 0/.5);opacity:0;transition:opacity .35s;pointer-events:none}
.worth.b{transform:rotateY(180deg) translateZ(1px)}
.card.priced .worth{opacity:var(--wt,1)}
/* the blur is on a child, not on the halo itself: the halo pulses, and a filter on an animating layer is redone every frame, whereas this is painted once and then only scaled and faded */
.lustre{position:absolute;inset:-3.5%;transform:translateZ(-1px);opacity:0;transition:opacity .6s,display .6s allow-discrete;pointer-events:none}
/* the halo and the glint are each a card-sized layer of their own (5 MB apiece on a 3x phone), so only a card that is turned up and worth something has them:
   not the pile waiting face down, and not the pennies (.cheap, from engine/cards.js: under 50 cents, where they would show at under 8%) */
.card:not(.priced) .lustre,.card:not(.priced) .glint,.card.cheap .lustre,.card.cheap .glint{display:none}
@starting-style{.card.priced .lustre{opacity:0}}
.lustre::before{content:"";position:absolute;inset:0;border-radius:8%/6%;background:conic-gradient(var(--vc),#fff,var(--vc),color-mix(in srgb,var(--vc) 40%,#0000),var(--vc),#fff,var(--vc));filter:blur(calc(var(--cw)*.055))}
.card.priced .lustre{opacity:calc(var(--v,0)*var(--wg,1));animation:lustre 1.9s ease-in-out infinite alternate}
@keyframes lustre{from{scale:.975}to{scale:calc(1.01 + var(--v,0)*.05)}}
.glint{position:absolute;inset:0;border-radius:calc(var(--cw)*var(--r,.0475));transform:translateZ(.6px);backface-visibility:hidden;mix-blend-mode:screen;opacity:0;pointer-events:none;overflow:hidden}
/* the band of light is slid across, not repainted: animating background-position had the card's glint layer painted afresh every frame of every sweep, which in
   WebKit piles up buffers (~60 MB a card measured). The band is the same picture as before (a 115deg gradient on a box three cards wide, placed by --cw), drawn once on a
   strip 1.3 cards wide that just holds it; the strip moves from where the band started (background-position 130%) to where it ended (-30%) */
.glint::before{content:"";position:absolute;top:0;bottom:0;left:0;width:130%;translate:-134.615% 0;
  background:linear-gradient(115deg,#0000 42%,color-mix(in srgb,var(--vc) 55%,#0000) 47%,rgb(255 255 255/.85) 50%,color-mix(in srgb,var(--vc) 55%,#0000) 53%,#0000 58%) calc(var(--cw)*-.85) 0/calc(var(--cw)*3) 100% no-repeat}
.card.priced .glint{opacity:calc(var(--v,0)*var(--wg,1))}
.card.priced .glint::before{animation:glint calc(4.2s - var(--v,0)*2s) ease-in-out var(--gd,0s) infinite}
@keyframes glint{0%,55%{translate:-134.615% 0}100%{translate:111.538% 0}}
.card.mtg img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.card.mtg .holo{opacity:calc((.22 + var(--hyp)*.42)*var(--holo));filter:brightness(.72) contrast(1.35) saturate(1.3)}
/* traditional foil: besides the rainbow, a bright band of light slides across the whole card as it turns, so it reads as foil even at rest */
.card.mtg:not(.f-nonfoil) .face:not(.flip)::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(112deg,#0000 28%,rgb(255 170 215/.2) 39%,rgb(255 255 255/.5) 48%,rgb(160 220 255/.24) 57%,#0000 69%) calc(var(--px)*1%) 0/260% 100%;
  opacity:calc((.4 + var(--hyp)*.6)*var(--holo))}
.card.mtg.f-etched .face:not(.flip)::after{opacity:calc((.18 + var(--hyp)*.3)*var(--holo))}
.card.mtg .glare{opacity:calc((.12 + var(--hyp)*.45)*var(--glare))}
.card.mtg.f-nonfoil .holo{display:none}
/* etched: matte, with a fine metallic grain rather than a rainbow sweep */
/* the surface is roughened, like fine sandpaper lit from one side, and the metal shows as specks that wink on and off as two layers of grain slide past each other */
.card.mtg.f-etched .face:not(.flip)::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;background:var(--bump) 0 0/150px 150px;mix-blend-mode:overlay;opacity:calc(.48*var(--etch,1))}
.card.mtg.f-etched .holo{background:linear-gradient(calc(100deg + var(--px)*.6deg),#70747e,#f6f8fb 22%,#9a9eaa 40%,#fff 55%,#8b8f9b 72%,#eceff4) calc(var(--px)*1%) calc(var(--py)*1%)/260% 260%;mix-blend-mode:color-dodge;
  -webkit-mask:var(--grain) calc(var(--px)*.5px) calc(var(--py)*.5px)/97px 97px,var(--grain) calc(var(--px)*-.7px) calc(var(--py)*-.4px)/131px 131px;mask:var(--grain) calc(var(--px)*.5px) calc(var(--py)*.5px)/97px 97px,var(--grain) calc(var(--px)*-.7px) calc(var(--py)*-.4px)/131px 131px;
  -webkit-mask-composite:source-in;mask-composite:intersect;opacity:calc((.5 + var(--hyp)*.5)*var(--holo)*var(--etch,1));filter:none}
.card.mtg.f-etched .holo::after{display:none}
/* textured: the rainbow is broken up by a raised pattern */
.card.mtg.f-textured .holo{-webkit-mask:repeating-conic-gradient(from calc(var(--px)*1.2deg) at 50% 50%,#000 0 4deg,rgb(0 0 0/.25) 4deg 8deg),repeating-linear-gradient(45deg,#000 0 3px,rgb(0 0 0/.4) 3px 6px);
  mask:repeating-conic-gradient(from calc(var(--px)*1.2deg) at 50% 50%,#000 0 4deg,rgb(0 0 0/.25) 4deg 8deg);opacity:calc((.35 + var(--hyp)*.6)*var(--holo))}
.card.mtg.serial .holo{opacity:calc((.4 + var(--hyp)*.6)*var(--holo));background-size:200% 200%}   /* double rainbow: tighter bands, brighter */
.card.mtg.fanfare .face{animation:fanfare 1.1s var(--ease-out)}
@keyframes fanfare{0%{box-shadow:0 0 0 0 rgb(255 226 150/.95),0 0 90px 30px rgb(255 190 90/.85)}100%{box-shadow:0 0 0 0 #0000,0 8px 14px -9px rgb(0 0 0/.6)}}

.hud{position:fixed;left:50%;translate:-50% 0;width:min(92vw,560px);text-align:center;pointer-events:none;color:#f3f0f6;font-family:system-ui,sans-serif;z-index:2}
/* over the stage, so a card flying past (or the confetti) never hides the caption; but under a card held up close, which is what is being looked at */
body:has(.dock.zoom) .hud{z-index:auto}
.hud:empty{display:none}
/* a dark halo round the caption's letters, so confetti falling behind them never makes them hard to read */
.h-slot,.h-name,.h-meta,.h-prog{text-shadow:0 0 3px rgb(13 11 16/.9),0 0 10px rgb(13 11 16/.75)}
.h-meta .r{text-shadow:none}
.h-slot{font:600 11px/1.4 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:rgb(255 255 255/.55);text-wrap:balance}
.h-name{margin-top:3px;font:700 19px/1.25 ui-rounded,system-ui,sans-serif}
.h-meta{margin-top:5px;font:500 12.5px/1.4 system-ui,sans-serif;color:rgb(255 255 255/.72);font-variant-numeric:tabular-nums}
.h-prog{margin-top:5px;font:500 11.5px/1.4 system-ui,sans-serif;color:rgb(255 255 255/.45);font-variant-numeric:tabular-nums}
.h-meta .r{display:inline-block;padding:2px 7px;border-radius:99px;font-weight:700;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#17141b;background:#cfcfd4}
.h-meta .r-uncommon{background:#a9c6d6}.h-meta .r-rare{background:#e6c66a}.h-meta .r-mythic{background:#f0763a;color:#fff}.h-meta .r-special,.h-meta .r-bonus{background:#b58cf0;color:#fff}.h-meta .r-token{background:#8f8f9c;color:#fff}
.h-meta .big{color:#ffd98a;font-weight:700}
/* the sealed pack's name plate: small under a pack standing in the row, a banner with the set's art once it is picked */
.h-pack{position:relative;display:inline-flex;align-items:center;gap:10px;text-align:left;max-width:100%}
.h-sym{width:22px;height:22px;object-fit:contain;filter:invert(1) drop-shadow(0 1px 2px rgb(0 0 0/.6));opacity:.9;flex:none}
.h-set{font:700 clamp(15px,.75vw,19px)/1.2 ui-rounded,system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-kind{margin-top:2px;font:600 10.5px/1.3 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:rgb(255 255 255/.6);white-space:nowrap}
.h-id{min-width:0}
.h-price{margin-left:6px;font:700 clamp(15px,.75vw,19px)/1 ui-rounded,system-ui,sans-serif;font-variant-numeric:tabular-nums;color:#ffe9a8;white-space:nowrap}
.h-price.short{color:#ff7d6e}
.h-pack.held{display:flex;gap:14px;width:min(100%,clamp(400px,22vw,560px));margin:0 auto;padding:clamp(14px,.75vw,20px) clamp(18px,1vw,26px);border-radius:16px;overflow:hidden;isolation:isolate;
  background:linear-gradient(100deg,color-mix(in srgb,var(--a1,#888) 34%,#0c0a10),color-mix(in srgb,var(--a2,#666) 22%,#0c0a10));box-shadow:0 0 0 1px rgb(255 255 255/.12) inset,0 10px 30px rgb(0 0 0/.35)}
.h-pack.art::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(8 6 12/.82) 0%,rgb(8 6 12/.45) 55%,rgb(8 6 12/.7) 100%),var(--art) center 28%/cover}
.h-pack.held .h-sym{width:clamp(38px,2vw,52px);height:clamp(38px,2vw,52px);opacity:1}
.h-pack.held .h-set{font-size:clamp(21px,1.1vw,28px)}
.h-pack.held .h-kind{font-size:clamp(11px,.55vw,14px);color:rgb(255 255 255/.72)}
.h-pack.held .h-price{margin-left:auto;font-size:clamp(21px,1.1vw,28px);text-shadow:0 1px 6px rgb(0 0 0/.6)}