/* The field of cards: the frame, the small backs and the card face itself.

   Shared by both versions of the front page - the full one (index.html, driven
   by its scroll) and the basic one (front/index.html, drifting on a clock).
   field.js builds what these rules dress. */

/* ---------------------------- 1. the card flyby ----------------------------
   The faces are REAL cards, at the Dev Portal's hand size and with its exact
   measurements - 163x239, 96px of art, the same type scale - so a card here and
   a card in the database are the same object. Do not retune these numbers in
   isolation; they are shared with the game and the portal.

   The card is rendered at its true size and scaled by transform, so the type
   stays in proportion instead of being re-laid-out at each size. */
/* The field is a 3D stage. `perspective` lives on the frame and
   `transform-style:preserve-3d` on the stage inside it, so the cards keep their
   depth relative to one another instead of being flattened into one plane.

   A CSS `filter` on a card does NOT knock it out of this - checked - so the
   brightness that gives the field its depth still works. What a filter flattens
   is the card's own interior, which is flat anyway. */
.flyfield{position:absolute;inset:0;z-index:1;overflow:hidden;
  perspective:1500px;perspective-origin:56% 48%;}
.fly-stage{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;}

/* A MOTE is a card seen from far enough away to be a shape rather than a card:
   no art, no text, just a faction-tinted back. There are a couple of hundred of
   them, and that is the whole point - a ring reads as a ring because enough
   small things describe it. Forty-six full card faces cannot draw a circle,
   because each one is bigger than the arc it is meant to sit on. */
.flymote{position:absolute;left:50%;top:50%;border-radius:2px;will-change:transform;
  box-shadow:0 0 0 .5px rgba(0,0,0,.4);}

/* Cards are centred on the stage by margin, so a transform of zero puts one
   dead centre and everything is written as an offset from there. Scaling and
   rotation then happen about the card's own middle, which is what the ring and
   the stack both need. */
.flycard{position:absolute;left:50%;top:50%;margin-left:-81.5px;margin-top:-119.5px;
  width:163px;height:239px;backface-visibility:hidden;
  border-radius:6px;border:1px solid #C9C6C1;background:#FFFFFF;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 16px 36px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.4);will-change:transform;}

.flycard .c-art{position:relative;flex-shrink:0;overflow:hidden;height:96px;}
.flycard .c-art img{width:100%;height:100%;object-fit:cover;display:block;}
.flycard .c-pips{position:absolute;top:5px;left:5px;display:flex;flex-direction:column;gap:3px;z-index:2;}
.flycard .c-pip{width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 1.5px #fff;}
.flycard .c-pip.pay{background:#14181D;}
.flycard .c-pip.burn{background:#C0392B;}
.flycard .c-pip.mint{background:#1B7F3B;}
/* the faction colour bar doubles as the rule between art and text */
.flycard .c-div{height:5px;flex-shrink:0;}
.flycard .c-txt{flex:0 0 auto;overflow:hidden;padding:6px 9px 4px;}
.flycard .c-name{font-size:12.5px;font-weight:700;line-height:1.15;color:#14181D;letter-spacing:-.005em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.flycard .c-meta{margin-top:5px;padding-right:32px;}   /* clears the stat chip */
.flycard .c-type{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  color:#5A6270;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.flycard .c-sect{font-size:10.5px;color:#6E7783;line-height:1.25;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.flycard .c-rules{flex:1 1 auto;min-height:0;overflow:hidden;font-size:8.5px;color:#14181D;
  line-height:1.45;padding:0 9px 6px;}
.flycard .c-rules img{height:11px;vertical-align:-2px;margin:0 1px;}
.flycard .c-stat{position:absolute;right:6px;bottom:5px;line-height:0;z-index:3;}

/* the canvas version of the field fills its frame */
.fly-canvas{position:absolute;inset:0;display:block;}