/* card.css — Harrison's player card. Pairs with card.js.
 *
 * Everything is scoped under #screen-card so nothing here reaches the rest of
 * the app, and every color is a token from styles.css. The only literals are
 * the three metals, copied from the .badge.t1/.t2/.t3 rules so a gold chip on
 * the card is the same gold as a gold trophy in the case.
 *
 * The card is sized, not laid out: it is a 5:7 trading card that takes whatever
 * room is left under the top bar, and everything inside it is measured in cqw
 * so it scales as one piece. That is what keeps it on one screen in both
 * orientations of an iPad mini without a second set of type sizes.
 */

/* A note on the floors below.
 *
 * Sizing everything in cqw is what keeps the card one piece, and it works at the
 * portrait size, where the card is 695px wide and 1cqw is nearly 7px. Lying down
 * the card is 466px wide, 1cqw is 4.66px, and every label on it fell through the
 * floor at once - the stat captions to 9.2px, the metals and the footer to 8.3px,
 * all of them in Press Start 2P, which loses its strokes below 12px. Measured on
 * an iPad mini in both orientations, not estimated.
 *
 * So each label is written as max(<floor>, <n>cqw): the card keeps scaling as one
 * piece wherever there is room, and stops scaling its labels when there is not.
 * The height that buys comes out of the art panel, which is the one flex item on
 * the card with room to give - the card's own height is fixed by its 5:7 ratio,
 * so none of this can push it past the fold.
 */

/* ------------------------------------------------------------------ stage */

#screen-card.on { display: block; }

.hqc-stage {
  /* card.js measures the room left under the top bar and writes --hqc-h here.
     The calc is only what the first paint uses before that runs. */
  height: var(--hqc-h, calc(100svh - 190px));
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
}

.hqc-shell {
  container-type: size;
  min-height: 0;
  min-width: 0;
  display: grid;
  place-items: center;
}

/* Both bounds at once. Height alone would overflow the width on a narrow
   screen; max-width alone would stretch the card out of 5:7. */
.hqc {
  position: relative;
  overflow: hidden;
  width: min(100cqw, calc(100cqh * 5 / 7));
  aspect-ratio: 5 / 7;
  container-type: size;

  display: flex;
  flex-direction: column;
  gap: 1.5cqw;
  padding: 2.6cqw;

  color: var(--ink);
  /* The dots layer is first so the dead LEDs sit over the gradient, the same
     way styles.css lays them over every other panel. --dots is `none` in
     Insert Coin, so that layer costs that skin nothing. */
  background:
    var(--dots) 0 0 / 2.2mm 2.2mm,
    radial-gradient(120% 70% at 50% 0%, var(--shade) 0%, transparent 60%),
    linear-gradient(170deg, var(--bg-2), var(--card));
  border: 0.7cqw solid var(--turq);
  border-radius: calc(var(--radius) * 2);
  box-shadow: var(--shadow), var(--glow);
}

/* The foil sweep. It is the one thing on this screen that moves, it is slow,
   and at rest it sits off the left edge — so killing the animation leaves a
   clean card rather than a gradient frozen across his face. */
.hqc-foil {
  position: absolute; top: -20%; left: 0; bottom: -20%; width: 34%;
  z-index: 2; pointer-events: none; opacity: .5;
  background: linear-gradient(100deg, transparent, var(--turq), transparent);
  mix-blend-mode: screen;
  transform: translateX(-160%) skewX(-16deg);
  animation: hqc-foil 7s ease-in-out infinite;
}
@keyframes hqc-foil {
  0%, 55% { transform: translateX(-160%) skewX(-16deg); }
  100%    { transform: translateX(420%) skewX(-16deg); }
}
:root[data-motion="off"] .hqc-foil { animation: none; }
@media (prefers-reduced-motion: reduce) { .hqc-foil { animation: none; } }

/* ------------------------------------------------------------------- head */

.hqc-head {
  display: flex; align-items: center; gap: 2.4cqw;
  height: 14cqw; flex: 0 0 auto;
}
.hqc-mark {
  display: grid; place-items: center;
  width: 11cqw; height: 11cqw; flex: 0 0 auto;
  border-radius: calc(var(--radius) * 1.5);
  background: linear-gradient(145deg, var(--turq), var(--blue-deep));
  font-family: var(--pixel); font-size: 3.6cqw; color: var(--on-bright);
  box-shadow: 0 .6cqw 0 var(--drop), var(--glow);
}
.hqc-who { flex: 1 1 auto; min-width: 0; }
.hqc-name, .hqc-team { display: block; }
.hqc-name {
  font-family: var(--pixel); font-size: 6cqw; line-height: 1;
  color: var(--ink); text-shadow: 0 .5cqw 0 var(--drop);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hqc-team {
  margin-top: 1.4cqw;
  font-family: var(--pixel); font-size: max(12px, 2.3cqw); letter-spacing: .1em;
  text-transform: uppercase; color: var(--turq);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hqc-lvl { flex: 0 0 auto; text-align: center; line-height: 1; }
.hqc-lvl b {
  display: block;
  font-family: var(--num); font-variation-settings: var(--num-set);
  font-variant-numeric: tabular-nums; font-weight: 900;
  font-size: 9cqw; color: var(--turq); text-shadow: var(--glow);
}
.hqc-lvl em {
  display: block; margin-top: 1cqw; font-style: normal;
  font-family: var(--pixel); font-size: max(12px, 2.2cqw); letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}

/* -------------------------------------------------------------------- art */

.hqc-art {
  position: relative; flex: 1 1 auto; min-height: 0;
  overflow: hidden;
  border: .5cqw solid var(--line); border-radius: var(--radius);
  background:
    radial-gradient(70% 58% at 50% 34%, var(--shade) 0%, transparent 70%),
    var(--sunk);
}
/* The court the boy is standing on: two arcs, drawn in the frame color so it
   reads as printing on the card rather than as furniture. */
.hqc-art::before {
  content: "";
  position: absolute; left: 50%; bottom: -26%; translate: -50% 0;
  width: 92%; aspect-ratio: 1; border-radius: 50%;
  border: .5cqw solid var(--turq); opacity: .28;
}
.hqc-art::after {
  content: "";
  position: absolute; left: 50%; bottom: -13%; translate: -50% 0;
  width: 46%; aspect-ratio: 1; border-radius: 50%;
  border: .5cqw solid var(--turq); opacity: .18;
}
/* The plate exists so the photo has a box with a definite height to be fitted
   into. The art panel is a flex item with an indefinite height, and against
   that `height: 100%` on the image quietly resolves to auto — which rendered
   him 760px tall in a 444px frame, cropped to a head. An absolutely positioned
   box is always a definite containing block, so the percentages hold. The
   bottom inset is the rank ribbon's room. */
.hqc-plate {
  position: absolute; inset: 1.5cqw 1.5cqw 8cqw;
  display: grid; place-items: center;
}
.hqc-hero {
  width: 100%; height: 100%;
  /* min-height: auto on a grid item with an intrinsic ratio is the WIDTH
     transferred through that ratio — 760px here — and it outranks height: 100%.
     Zeroing it is what actually makes object-fit letterbox him. */
  min-width: 0; min-height: 0;
  object-fit: contain;
  scale: var(--pose-scale, 1);
  filter: drop-shadow(0 1.4cqw 2cqw rgba(0, 0, 0, .55));
}
/* No art at all: the wordmark stands in for him rather than a hole. */
.hqc-none {
  display: none;
  font-family: var(--pixel); font-size: 26cqw; line-height: 1;
  color: var(--line); opacity: .55;
}
.hqc-art[data-art="none"] .hqc-hero { display: none; }
.hqc-art[data-art="none"] .hqc-none { display: block; }

.hqc-streak {
  position: absolute; top: 2cqw; right: 2cqw;
  /* The gap has a floor too: at .8cqw it is under four pixels lying down, and
     "1 day streak" ran together as "1DAY". */
  display: flex; align-items: baseline; gap: max(5px, .8cqw);
  padding: 1.1cqw 1.8cqw; border-radius: var(--radius);
  background: var(--card); border: .4cqw solid var(--fire);
  font-family: var(--pixel); font-size: max(12px, 2.2cqw); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.hqc-streak b {
  font-family: var(--num); font-variation-settings: var(--num-set);
  font-weight: 900; font-size: 3.4cqw; color: var(--fire);
}
.hqc-rank {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6cqw 2cqw;
  background: linear-gradient(180deg, var(--green), var(--turq));
  color: var(--on-bright);
  font-family: var(--pixel); font-size: 3.6cqw; line-height: 1;
  letter-spacing: .06em; text-transform: uppercase; text-align: center;
  box-shadow: 0 -.4cqw 0 var(--drop);
}

/* --------------------------------------------------------------------- xp */

.hqc-xp { flex: 0 0 auto; }
.hqc-xp-line {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 1cqw;
  font-family: var(--pixel); font-size: max(12px, 2.2cqw); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.hqc-xp-line span {
  font-family: var(--num); font-variation-settings: var(--num-set);
  font-variant-numeric: tabular-nums; font-size: max(14px, 2.8cqw); color: var(--turq);
}
.hqc-bar {
  height: 3cqw; overflow: hidden;
  background: var(--sunk); border: .4cqw solid var(--line);
}
.hqc-bar i {
  display: block; height: 100%; width: 0;
  background: repeating-linear-gradient(90deg,
    var(--turq) 0 1.6cqw, var(--turq-deep) 1.6cqw 2cqw);
  box-shadow: var(--glow);
}

/* ------------------------------------------------------------------ stats */

.hqc-stats {
  flex: 0 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw;
}
.hqc-stat {
  padding: 1.4cqw 1.6cqw;
  background: var(--card); border: .4cqw solid var(--line);
  border-radius: var(--radius); box-shadow: 0 .5cqw 0 var(--drop);
  background-image: var(--dots); background-size: 2.2mm 2.2mm;
}
.hqc-stat b {
  display: block; line-height: 1;
  font-family: var(--num); font-variation-settings: var(--num-set);
  font-variant-numeric: tabular-nums; font-weight: 900;
  font-size: 7.4cqw; color: var(--turq); text-shadow: var(--glow);
}
.hqc-stat em {
  /* "Sets cleared", "Best streak" - the captions that say what the big number
     over each one counts, and the smallest thing on the card at 9.2px lying
     down. They also leave the muted token: a caption nobody can read is the
     same as no caption. */
  display: block; margin-top: 1.2cqw; font-style: normal;
  font-family: var(--pixel); font-size: max(12px, 2.1cqw); line-height: 1.4;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}

/* ----------------------------------------------------------------- metals */

.hqc-metals {
  flex: 0 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw;
}
.hqc-metal {
  display: flex; align-items: center; gap: 1.4cqw;
  padding: 1.2cqw 1.4cqw;
  background: var(--sunk); border-radius: var(--radius);
  border: .4cqw solid var(--line);
}
.hqc-metal i {
  width: 4.4cqw; height: 4.4cqw; flex: 0 0 auto; border-radius: 50%;
}
.hqc-metal b {
  font-family: var(--num); font-variation-settings: var(--num-set);
  font-variant-numeric: tabular-nums; font-weight: 900;
  font-size: 4.4cqw; line-height: 1;
}
/* The word is the part of a chip that stops fitting first. Everything on this
   card scales in cqw, but the type has a 12px floor under it, so "BRONZE" keeps
   its size while the chip around it shrinks. On an iPad mini it has room in both
   orientations — the card is 707px wide standing up and 479px lying down, and
   "Bronze" ends 380px inside the right edge on the tighter of the two. Lying
   down is the one to re-measure if anything on this card grows, because that is
   where a chip is 144px rather than 214px. */
.hqc-metal em {
  font-style: normal; font-family: var(--pixel); font-size: max(12px, 1.9cqw);
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}

/* The three metals are the only literal colors on this card, and they are the
   ones styles.css already hard-codes on .badge.t1/.t2/.t3 — a token would make
   bronze change with the skin, and bronze does not. */
.hqc-metal.m1 { border-color: #a9703f; }
.hqc-metal.m1 i { background: #a9703f; }
.hqc-metal.m1 b { color: #a9703f; }
.hqc-metal.m2 { border-color: #b9c2cc; }
.hqc-metal.m2 i { background: #b9c2cc; }
.hqc-metal.m2 b { color: #b9c2cc; }
.hqc-metal.m3 { border-color: #f4c04a; box-shadow: 0 0 2cqw rgba(244, 192, 74, .3); }
.hqc-metal.m3 i { background: #f4c04a; }
.hqc-metal.m3 b { color: #f4c04a; }

/* ------------------------------------------------------------------- foot */

.hqc-foot {
  flex: 0 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--pixel); font-size: max(12px, 1.9cqw); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.hqc-foot span:last-child { color: var(--turq); }

/* ---------------------------------------------------------------- actions */

.hqc-acts {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap; min-width: 0;
}
.hqc-acts .big-btn { min-width: 0; padding: 14px 22px; }
.hqc-acts .ghost-btn { margin: 0; }
.hqc-note {
  flex: 1 0 100%; margin: 0; text-align: center;
  font-size: 15px; color: var(--muted);
}
.hqc-note:empty { display: none; }

/* Landscape has width to spare and no height to spare, so the buttons move
   beside the card and the card takes the whole column. */
@media (orientation: landscape) {
  /* A row, centered as one piece — the card is not centered on the screen with
     the buttons pushed to the far edge, because that reads as two screens.
     The shell must NOT be shrink-wrapped: it is a size container, so a height
     that depends on its contents resolves every cqw inside the card to zero and
     the card collapses to nothing. It stretches to the row, and the ratio gives
     it a definite width from that. */
  .hqc-stage {
    display: flex; flex-direction: row;
    justify-content: center; align-items: stretch;
    gap: 20px;
  }
  .hqc-shell { flex: 0 1 auto; aspect-ratio: 5 / 7; min-width: 0; }
  .hqc-acts {
    flex: 0 0 200px; flex-direction: column; justify-content: center;
    align-self: center;
  }
  .hqc-acts .big-btn, .hqc-acts .ghost-btn { width: 100%; }
  .hqc-note { flex: 0 0 auto; }
}

/* The XP line pairs a number with its label; the label is set like every other
   label on the card, not in italics. */
.hqc-xp-line em { font-style: normal; }