/* The Telegram gift card, Vibes-style. 750x1050, scaled with a transform. A dark frame round full-bleed art (the gift
   standing in a little world drawn in its backdrop colours); an OVR tab top-left, the name on a pill in the tier colour
   with the collection under it, a frosted trait box, the TON value tab bottom-right, the tier bottom-left, a footer
   line in the frame. Laminate gloss and a glare that follow the tilt; foil from Epic up. Body text never below 22px
   here (about 10px on a phone). One family (Geist). Radius: 34 card, 24 art. */
.gc{--tc:#8d97a8;--tcd:#5d6676;--ink:#17181f;position:relative;width:750px;height:1050px;border-radius:34px;background:var(--ink);
  font-family:Geist,system-ui,-apple-system,sans-serif;color:#14171d;font-variant-numeric:tabular-nums;isolation:isolate;overflow:hidden;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.08),inset 0 3px 0 rgba(255,255,255,.14)}
.gc.t-Rare{--tc:#3d8bfd;--tcd:#1f5fc4}.gc.t-Epic{--tc:#8b5cf6;--tcd:#6237d4}.gc.t-Legendary{--tc:#e9a514;--tcd:#a96f00}.gc.t-Mythic{--tc:#ec4899;--tcd:#b8175f}
.gc .win{position:absolute;left:12px;right:12px;top:12px;bottom:40px;border-radius:24px;overflow:hidden;background:#2a2f3a}
.gc .scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.gc .bdg{position:absolute;inset:0}
.gc .bdg img{width:100%;height:100%;object-fit:cover}
.gc .mos{position:absolute;inset:0}
.gc .mo{position:absolute;opacity:.5;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.gc .gsh{position:absolute;left:50%;top:684px;width:330px;height:52px;margin-left:-165px;border-radius:50%;background:rgba(0,0,0,.3);filter:blur(10px)}
.gc .model{position:absolute;left:50%;top:43%;width:560px;height:560px;margin:-280px 0 0 -280px;filter:drop-shadow(0 16px 20px rgba(0,0,0,.28))}
.gc .model.anim{filter:none;will-change:transform} /* a playing animation repaints only itself (and no filter re-runs) */
.gc .model img,.gc .model canvas,.gc .model svg{width:100%!important;height:100%!important;display:block}

/* the corner tabs, cut out of the frame */
.gc .cost{position:absolute;left:12px;top:12px;z-index:4;width:118px;height:158px;border-radius:24px 0 32px 0;background:var(--ink);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.gc .cost i{font-size:30px;color:var(--tc);margin-bottom:4px}
.gc .cost b{font-size:66px;font-weight:800;letter-spacing:-.04em;line-height:.95}
.gc .cost span{font-size:16px;font-weight:700;letter-spacing:.12em;color:rgba(255,255,255,.55);margin-top:2px}
.gc .pow{position:absolute;right:12px;bottom:40px;z-index:4;min-width:118px;height:98px;padding:0 18px;border-radius:32px 0 24px 0;background:var(--ink);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.gc .pow b{font-size:46px;font-weight:800;letter-spacing:-.03em;line-height:1}
.gc .pow span{font-size:16px;font-weight:700;letter-spacing:.12em;color:rgba(255,255,255,.55);margin-top:3px}
.gc .pow.play b{font-size:36px;letter-spacing:.06em;color:var(--tc)}       /* a play card: no money value */
.gc .tierc{position:absolute;left:12px;bottom:40px;z-index:4;height:60px;padding:0 24px 0 20px;border-radius:0 26px 0 24px;background:var(--ink);color:var(--tc);
  display:flex;align-items:center;font-size:21px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.gc .nt{position:absolute;top:470px;width:7px;height:110px;border-radius:4px;background:var(--tc);z-index:4}
.gc .nt.l{left:2px}.gc .nt.r{right:2px}

/* the name, like a character's */
/* the pill is never narrower than its tab: both stretch to the wider one, and the tab sits inset under the pill */
.gc .ttl{position:absolute;left:146px;right:146px;top:26px;z-index:4;display:flex;justify-content:center}
.gc .tw{display:flex;flex-direction:column;align-items:stretch;min-width:0;max-width:100%}
.gc .nm{position:relative;z-index:1;text-align:center;height:68px;line-height:62px;padding:0 32px;border-radius:34px;background:var(--tc);color:#fff;font-size:35px;font-weight:700;
  letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:3px solid var(--ink);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.32),0 6px 14px rgba(0,0,0,.22);text-shadow:0 2px 0 rgba(0,0,0,.2)}
.gc .sb{margin:-5px 24px 0;text-align:center;height:36px;line-height:31px;padding:0 20px;border-radius:0 0 14px 14px;background:var(--tcd);color:#fff;font-size:19px;font-weight:600;
  border:3px solid var(--ink);border-top:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc .qr{position:absolute;right:30px;top:30px;z-index:4;width:104px;height:104px;border-radius:16px;background:#fff;padding:7px;box-shadow:0 6px 18px rgba(0,0,0,.25)}

/* the traits, on frosted card stock over the art */
.gc .box{position:absolute;left:40px;right:40px;bottom:140px;z-index:4;border-radius:22px;background:rgba(255,255,255,.93);padding:6px 26px;
  box-shadow:0 10px 26px rgba(0,0,0,.2),inset 0 0 0 2px rgba(255,255,255,.6)}
.gc .tr{display:grid;grid-template-columns:128px minmax(0,1fr) auto;align-items:center;height:54px}
.gc .tr+.tr{border-top:2px solid rgba(18,20,24,.08)}
.gc .tr .k{font-size:22px;font-weight:500;color:#6b7280}
.gc .tr .v{font-size:28px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:12px}
.gc .tr .p{font-size:26px;font-weight:700;color:var(--tcd)}
.gc .foot{position:absolute;left:24px;right:24px;bottom:0;height:40px;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-size:17px;font-weight:500;color:rgba(255,255,255,.5)}
.gc .foot span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* light: laminate gloss and a glare that follow the tilt (cardLight moves the <i> inside each), foil from Epic up,
   a shine pass on reveal (.shining). Only transforms change, so a tilting card is never repainted. */
.gc .foil,.gc .gloss,.gc .glare,.gc .shine{position:absolute;pointer-events:none;overflow:hidden}
.gc .foil i,.gc .gloss i,.gc .glare i,.gc .shine i{position:absolute;display:block}
.gc.lit .foil i,.gc.lit .gloss i,.gc.lit .glare i{will-change:transform}     /* .lit: the one card being tilted */
.gc .foil{left:12px;right:12px;top:12px;bottom:40px;border-radius:24px;z-index:3;display:none}
.gc .foil i{left:-50%;top:-50%;width:200%;height:200%;
  background:repeating-linear-gradient(115deg,rgba(255,80,170,.6) 0,rgba(255,215,90,.6) 3%,rgba(80,255,190,.6) 6%,rgba(80,170,255,.6) 9%,rgba(190,110,255,.6) 12%)}
.gc.t-Epic .foil{display:block;opacity:.1}.gc.t-Legendary .foil{display:block;opacity:.14}.gc.t-Mythic .foil{display:block;opacity:.18}
.gc .gloss{inset:0;border-radius:34px;z-index:5}
.gc .gloss i{top:-20%;height:140%;left:225px;width:300px;transform:rotate(25deg);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.17) 42%,rgba(255,255,255,.05) 58%,rgba(255,255,255,0))}
.gc .glare{inset:0;border-radius:34px;z-index:5}
.gc .glare i{left:25px;top:-35px;width:700px;height:700px;background:radial-gradient(circle,rgba(255,255,255,.2),rgba(255,255,255,0) 66%)}
.gc .shine{inset:0;border-radius:34px;z-index:6}
.gc .shine i{top:0;bottom:0;left:-480px;width:480px;background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.65) 50%,transparent 80%)}
.gc.shining .shine i{animation:gcshine 900ms cubic-bezier(.23,1,.32,1)}
@keyframes gcshine{from{transform:translateX(0)}to{transform:translateX(1300px)}}

/* small sizes: the art, a big OVR tab, the tier colour as the rim (the app prints the name under it) */
.gc.thumb{background:var(--tc)}
.gc.thumb .win{bottom:12px}
.gc.thumb .foil,.gc.thumb .gloss,.gc.thumb .glare,.gc.thumb .shine,.gc.thumb .ttl,.gc.thumb .box,.gc.thumb .pow,.gc.thumb .foot,.gc.thumb .tierc,.gc.thumb .nt,.gc.thumb .qr,.gc.thumb .cost i,.gc.thumb .cost span{display:none}
.gc.thumb .cost{width:auto;height:auto;padding:16px 30px 22px 26px;border-radius:24px 0 40px 0}
.gc.thumb .cost b{font-size:96px}
.gc.thumb .model{top:52%;width:660px;height:660px;margin:-330px 0 0 -330px}
.gc.thumb .gsh{top:820px}

/* the back */
.gcb{position:relative;width:750px;height:1050px;border-radius:34px;overflow:hidden;font-family:Geist,system-ui,sans-serif;background:#17181f;padding:14px}
.gcb .in{position:relative;width:100%;height:100%;border-radius:24px;overflow:hidden;background:radial-gradient(85% 60% at 50% 42%,#46b3ff,#1f7fe0 55%,#155bb0)}
.gcb .in::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.06) 0 2px,transparent 2px 10px)}
.gcb .lg{position:absolute;left:50%;top:44%;width:250px;height:250px;margin:-125px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.16);box-shadow:0 0 0 18px rgba(255,255,255,.07),inset 0 2px 0 rgba(255,255,255,.25)}
.gcb .lg i{font-size:130px;color:#fff;margin:8px 10px 0 0}
.gcb .wd{position:absolute;left:0;right:0;top:66%;text-align:center;font-size:38px;font-weight:600;color:#fff;letter-spacing:-.01em}