/*
 * Card face composition.
 *
 * Direct port of the Dueling Book card-front layout. The face is a fixed
 * 813 x 1185 canvas and every element is absolutely positioned, so a card is
 * built from ~10 small layered assets instead of one stored 400x580 image.
 *
 * All offsets below were extracted from the reference stylesheet
 * (Other/DecklistViewer/data/webpage/.../main_rMam.css) and match the DOM the
 * reference implementation emits.
 */

@font-face {
  font-family: "MatrixRegularSmallCaps";
  src: url("../fonts/MatrixRegularSmallCaps.ttf") format("truetype");
  font-display: block;
}
@font-face {
  font-family: "MatrixBook";
  src: url("../fonts/MatrixBook.ttf") format("truetype");
  font-display: block;
}
@font-face {
  font-family: "Stone Serif";
  src: url("../fonts/StoneSerif.ttf") format("truetype");
  font-display: block;
}
@font-face {
  font-family: "Stone Serif Bold";
  src: url("../fonts/StoneSerifBold.ttf") format("truetype");
  font-display: block;
}
@font-face {
  font-family: "RoGSanSrfStd-Bd";
  src: url("../fonts/RoGSanSrfStd-Bd.ttf") format("truetype");
  font-display: block;
}

/* ---------------------------------------------------------------- frame -- */

.ygocard {
  position: relative;
  width: 813px;
  height: 1185px;
  transform-origin: top left;
  /* The face is fully covered by the card_border layer, so this background is
     only ever seen for the instant between the element being painted and its
     image layers compositing. It used to be #fff, which made that instant a
     white flash whenever a card was swapped (hovering the inspector, paging the
     grid). A dark tone makes the same gap invisible against the panel. */
  background: #14161c;
  /* Card text is printed on a light card face, so it must not inherit the
     app's light-on-dark foreground. Spell/Trap names override this to white;
     everything else (type line, effect text, name, ATK/DEF) stays black. */
  color: #000;
  overflow: hidden;
  font-smooth: auto;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

.ygocard img {
  position: absolute;
  display: block;
  border: 0;
}

/* The border artwork is the full card; everything else sits on top of it. */
.ygocard .card_border {
  left: 0;
  top: 0;
  width: 813px;
  height: 1185px;
}

.ygocard .card_color {
  left: 27px;
  top: 28px;
  width: 759px;
  height: 1129px;
}

/* Art window. Black background shows through until the art loads. */
.ygocard .pic {
  left: 100px;
  top: 217px;
  width: 615px;
  height: 615px;
  background-color: #000;
  object-fit: cover;
}

.ygocard .pic.missing {
  background-color: #111;
}

/* ------------------------------------------------------------- elements -- */

.ygocard .attribute {
  left: 680px;
  top: 56px;
  width: 75px;
  height: 77px;
}

.ygocard .level,
.ygocard .rank {
  top: 147px;
  width: 50px;
  height: 50px;
}

/* Xyz monsters print a Rank, which has its own artwork (not a flipped Level). */
.ygocard .rank {
  /* positioned by card.js; the asset is already oriented */
}

/* ------------------------------------------------------- links/pendulum -- */

/* Link arrows, overlaid on the artwork at the eight compass points.
   Positions and rotations come from the reference stylesheet; the orthogonal
   points use the 70x71 corner glyph and the diagonals the 144x43 side glyph. */
.ygocard .link_arrow {
  position: absolute;
}

.ygocard .arrow1 {
  left: 71px; top: 189px; width: 70px; height: 71px;
}
.ygocard .arrow2 {
  left: 336px; top: 176px; width: 142px; height: 43px;
}
.ygocard .arrow3 {
  left: 673px; top: 189px; width: 70px; height: 71px;
  transform: rotate(90deg);
}
.ygocard .arrow4 {
  left: 758px; top: 454px; width: 142px; height: 43px;
  transform: rotate(90deg);
  transform-origin: top left;
}
.ygocard .arrow5 {
  left: 673px; top: 786px; width: 70px; height: 71px;
  transform: rotate(180deg);
}
.ygocard .arrow6 {
  left: 336px; top: 833px; width: 142px; height: 43px;
  transform: rotate(180deg);
  transform-origin: center;
}
.ygocard .arrow7 {
  left: 71px; top: 786px; width: 70px; height: 71px;
  transform: rotate(270deg);
}
.ygocard .arrow8 {
  left: 57px; top: 596px; width: 142px; height: 43px;
  transform: rotate(270deg);
  transform-origin: top left;
}

/* The Pendulum frame is a full replacement frame, so it uses the same box as
   .card_color; the .pendulum class is kept only as a styling hook. */
.ygocard .card_color.pendulum {
  left: 28px;
  top: 27px;
  width: 758px;
  height: 1130px;
}

/* Pendulum Effect box: the narrow strip between the artwork and the Monster
   Effect box on a Pendulum card. */
.ygocard .card_pendulum_effect_txt {
  position: absolute;
  left: 130px;
  top: 792px;
  width: 554px;
  height: 93px;
  font-family: "MatrixBook", serif;
  font-size: 25px;
  line-height: 26px;
  text-align: justify;
  overflow: hidden;
  transform-origin: top left;
  color: #000;
  white-space: pre-line;
}

/* Pendulum Scale values, in the two ribbons at the lower corners. */
.ygocard .scale_left_txt,
.ygocard .scale_right_txt {
  position: absolute;
  top: 820px;
  width: 70px;
  height: 62px;
  font-family: "MatrixRegularSmallCaps", serif;
  font-size: 58px;
  line-height: 70px;
  text-align: center;
  color: #000;
}
.ygocard .scale_left_txt { left: 48px; }
.ygocard .scale_right_txt { left: 693px; }

.ygocard .monster_line {
  position: absolute;
  left: 64.6px;
  top: 1076px;
  width: 684px;
  height: 3.5px;
  background-color: #000;
}

/* Card name. Monsters are black, Spells/Traps are white. The Spell/Trap case
   is applied by a class from card.js rather than an inline style. */
.ygocard .name_txt {
  position: absolute;
  left: 67px;
  top: 48px;
  width: 606px;
  height: 84px;
  font-family: "MatrixRegularSmallCaps", serif;
  font-size: 80.4px;
  line-height: 90px;
  white-space: nowrap;
  transform-origin: top left;
  color: #000;
}
/* The card NAME is white on Spell, Trap, Link and Xyz; black on Normal,
 * Effect, Fusion, Ritual, Synchro, Token and Skill.
 *
 * The list lives in WHITE_NAME_FRAMES in card.js, which applies this class.
 * Only the name is affected; every other text layer stays black. */
.ygocard.white_name .name_txt {
  color: #fff;
}

/* Spell/Trap descriptor line, right-aligned in the top-right corner.
 *
 * The subtype icon occupies x=671..713 on the same row, so the descriptor has
 * to stop before it. Only `width` matters here: with `left: auto` and a fixed
 * width the box is laid out from the right edge, so `right` alone has no effect
 * while an explicit width is present.
 *
 * The reference uses width 362 at right 83, which puts the text under the icon
 * with our wider glyphs; the box is therefore 302px wide, ending at x=671 and
 * clearing the icon by a hair.
 */
/* Spell/Trap descriptor line, e.g. "[ SPELL CARD <icon> ]".
 *
 * The subtype icon is drawn INLINE between the words and the closing bracket, so
 * it is part of the text flow and cannot overlap the descriptor the way the old
 * absolutely positioned layer did. The box is sized to the full width the line
 * needs: with the icon in the flow the line runs from x=369 to x=724, so the
 * box spans that range (width 355 at right 89) and nothing is clipped.
 *
 * `white-space: nowrap` keeps the bracket sequence on one line, and the right
 * edge is fixed rather than centred so every Spell and Trap lands identically.
 */
.ygocard .spell_type_txt {
  position: absolute;
  left: auto;
  right: 89px;
  top: 144px;
  width: 355px;
  height: 60px;
  font-family: "Stone Serif Bold", serif;
  font-size: 33px;
  line-height: 60px;
  text-align: right;
  white-space: nowrap;
  color: #000;
}
.ygocard .spell_type_medium { font-size: 37px; }
.ygocard .spell_type_large  { font-size: 40px; }

/* Inline subtype icon, sized to the descriptor's cap height. */
.ygocard .spell_type_txt .type_icon {
  position: static;
  display: inline-block;
  width: 34px;
  height: 34px;
  margin: 0 2px;
  vertical-align: -6px;
}

/* Monster type line, e.g. "[ ZOMBIE / TUNER / EFFECT ]". */
.ygocard .type_txt {
  position: absolute;
  left: 62px;
  top: 884px;
  width: 683px;
  height: 45px;
  font-family: "Stone Serif Bold", serif;
  font-size: 26.3px;
  font-weight: bold;
  line-height: 46px;
  margin-left: 4px;
  margin-top: 3px;
  white-space: nowrap;
  transform-origin: top left;
  color: #000;
}
.ygocard .type_medium { font-size: 30px; }
.ygocard .type_large  { font-size: 32px; }

/* Effect text box. Spells/Traps have no type line so they start higher. */
.ygocard .effect_txt {
  position: absolute;
  left: 62px;
  top: 919px;
  width: 685px;
  height: 173px;
  font-family: "MatrixBook", serif;
  font-size: 29px;
  line-height: 29px;
  text-align: justify;
  overflow: hidden;
  margin-top: 5px;
  margin-left: 2px;
  transform-origin: top left;
  color: #000;
  /* Effect text carries real line breaks between clauses; without this they
     would collapse into spaces. */
  white-space: pre-line;
}
.ygocard .effect_txt.spell_trap {
  top: 890px;
  height: 226px;
}

/* ATK / DEF
 *
 * In the reference these four spans flow inline: it sets left/top on them but
 * never `position`, so those offsets are inert and the text simply lays out in
 * document order after the effect box.
 *
 * Here they are absolutely positioned instead (which keeps them pinned above
 * the passcode regardless of how long the effect text runs), so each span needs
 * its own `left`. Giving them all one shared offset - as this file previously
 * did - stacks every value directly on top of its own label.
 *
 * The labels sit at the start of each stat column and the values follow the
 * label's trailing "/", so the line reads "ATK/3000  DEF/2500".
 */
.ygocard .atk_lbl,
.ygocard .def_lbl,
.ygocard .card_atk_txt,
.ygocard .card_def_txt {
  position: absolute;
  top: 1080px;
  font-family: "MatrixRegularSmallCaps", serif;
  font-size: 38px;
  line-height: 46px;
  color: #000;
}

/* Labels start each column. */
.ygocard .atk_lbl { left: 431px; }
.ygocard .def_lbl { left: 602px; }

/* Values follow the label's trailing "/". The labels measure ~74px at 38px, so
   the values start just past them rather than at the column origin (which would
   draw them over the label). */
.ygocard .card_atk_txt { left: 505px; }
.ygocard .card_def_txt { left: 676px; }

/* Link rating.
 *
 * The Link frame prints the bare word "LINK-" in the lower-right corner of the
 * stat row, so only the rating number is drawn, immediately to its right. The
 * reference puts this text at right: 62.5px, top: 1075px; the frame's own label
 * ends around x=700, which is why the number is anchored there rather than at
 * the ATK column. */
.ygocard .link_txt {
  position: absolute;
  left: auto;
  right: 70px;
  top: 1076px;
  font-family: "MatrixRegularSmallCaps", serif;
  font-size: 38px;
  line-height: 46px;
  text-align: right;
  color: #000;
}

/* Passcode */
.ygocard .passcode_txt {
  position: absolute;
  left: 37px;
  top: 1124px;
  width: 400px;
  height: 35px;
  font-family: "Stone Serif", serif;
  font-size: 24px;
  color: #000;
}

/* ------------------------------------------------------------- helpers -- */

/* Scale wrappers let a grid of full-size faces fit a narrow column without
   changing any of the offsets above. */
.ygocard-slot {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
}

.ygocard-slot > .ygocard {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}