/* Poker-size card art. Every card is laid out at its true print size,
   750 x 1050 px (2.5 x 3.5 in @ 300 dpi), and the preview only scales it
   with a transform — so what you see is exactly what prints. */
:root{ --cs:.42 }

.cardrow{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start;margin:14px 0 30px}
.pcwrap{width:calc(750px * var(--cs));height:calc(1050px * var(--cs));flex:0 0 auto}
.pc{width:750px;height:1050px;transform:scale(var(--cs));transform-origin:0 0;
  position:relative;border-radius:40px;padding:26px;overflow:hidden;
  background:linear-gradient(var(--wash),var(--wash)), var(--tex);
  background-size:auto, 330px auto;
  background-blend-mode:multiply, normal;
  box-shadow:0 14px 34px #000a}

/* cloth weave + top light + bottom shade, so the flat tile reads as fabric */
.pc::before{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    repeating-linear-gradient(45deg,#0000 0 5px,#00000012 5px 10px),
    radial-gradient(120% 80% at 50% 0%,#ffffff16,#0000 60%),
    radial-gradient(130% 95% at 50% 100%,#00000066,#0000 55%)}

.pc-frame{position:relative;z-index:2;height:100%;box-sizing:border-box;
  border:9px solid var(--edge);border-radius:26px;
  box-shadow:inset 0 0 0 5px #0009, 0 0 0 4px #00000055;
  display:flex;flex-direction:column;padding:30px 30px 26px}

/* ---------- tier palettes ---------- */
.tier-1{--wash:#6a6a5ebb; --edge:#cdc7b4; --ink:#faf7ec; --accent:#ffffff}
.tier-2{--wash:#8a7338bb; --edge:#e2be60; --ink:#fff4d6; --accent:#ffd873}
.tier-3{--wash:#6a4aa8bb; --edge:#a36eff; --ink:#f0e6ff; --accent:#c8a6ff}
.tier-4{--wash:#1d6f9ebb; --edge:#3fb6ff; --ink:#e2f4ff; --accent:#8ad6ff}
/* the Hunter: deep forest green, so a catch reads across the table at a glance */
.tier-h{--wash:#1d4a2abb; --edge:#4fbf6a; --ink:#e2f6e6; --accent:#8ee3a0}
.tier-p{--wash:#7a2430bb; --edge:#e0705f; --ink:#ffe9e3; --accent:#ff9c86}

/* ---------- BACK ---------- */
.back .pc-tier{text-align:center;font-size:74px;line-height:1;letter-spacing:.16em;
  font-weight:700;color:var(--accent);text-indent:.16em;
  text-shadow:0 4px 0 #000c, 0 0 26px var(--accent);
  padding:6px 0 18px;border-bottom:5px solid var(--edge)}
.back .pc-art{flex:1;display:flex;flex-direction:column;justify-content:space-between;
  align-items:center;gap:6px;min-height:0;padding:16px 0}
.back .brow{display:flex;justify-content:space-evenly;align-items:center;gap:8px;
  width:100%;flex:1;min-height:0}
.back .brow img{filter:drop-shadow(0 7px 9px #000b);
  max-height:100%;max-width:30%;width:auto;height:auto;object-fit:contain}
.back .brow.n1 img{max-width:58%}
.back .brow.n2 img{max-width:38%}
.back .brow.n3 img{max-width:31%}
.back .brow.n4 img{max-width:24%}
.back .brow.n5 img{max-width:19%}
/* tier 1 is three buildings stacked down the centre, one to a row */
.tier-1.back .brow img{max-width:58%}
.back .pc-foot{text-align:center;font-size:30px;letter-spacing:.4em;font-weight:700;
  text-indent:.4em;color:var(--edge);border-top:5px solid var(--edge);
  padding-top:16px;text-shadow:0 3px 0 #000c}

/* tiers 4 and 5: five sprites set out as a pentagon, WUBRG clockwise from the
   top, the way the colour wheel reads on the back of a Magic card */
.pent{position:relative;flex:1;width:100%;min-height:0;margin:6px 0}
.pent img{position:absolute;width:31%;transform:translate(-50%,-50%);
  filter:drop-shadow(0 7px 10px #000c)}
.pent img:nth-child(1){left:50%;  top:15%}   /* W */
.pent img:nth-child(2){left:86%;  top:42%}   /* U */
.pent img:nth-child(3){left:71%;  top:85%}   /* B */
.pent img:nth-child(4){left:29%;  top:85%}   /* R */
.pc.back.tier-5 .pent img:nth-child(3){left:29%}   /* B swaps to the left */
.pc.back.tier-5 .pent img:nth-child(4){left:71%}   /* R swaps to the right */
.pent img:nth-child(5){left:14%;  top:42%}   /* G */
/* Tier 4: the domes read left of centre because each throws its cast shadow
   off to the right, so the bounding box is not the subject. An eighth of an
   inch -- 37.5 px at the card's 300 dpi, shifted in true print pixels rather
   than percentages, so the preview is what prints. */
.pc.back.tier-4 .pent img{transform:translate(calc(-50% + 37.5px), -50%)}
/* A sprite's shadow used to run out over the frame, because an absolutely
   positioned descendant paints above its ancestor's border. Clipping the back
   at the frame's padding box puts the shadow behind the wire, and the inner
   dark ring is redrawn on top so the shadow cannot cover that either. */
/* Tier 5 carries five castles rather than five domes, and they read small on
   a card that is mostly empty in the middle: half again as large. */
.pc.back.tier-5 .pent img{width:46.5%}
/* Measured, not guessed: the white castle's central spire sits 25.9 card px
   left of its image's bounding-box centre, because the castle's own cast
   shadow pads the box out to the right. Shifting the whole ring by that much
   puts the spire on the card's centre line. */
.pc.back.tier-5 .pent img{transform:translate(calc(-50% + 25.9px), -50%)}
/* the green castle takes a further sixteenth of an inch off the left edge */
/* the middle pair lifted an eighth of an inch; the green keeps the 17.8 px
   that puts its base on the blue's, so they move together */
.pc.back.tier-5 .pent img:nth-child(2){transform:translate(calc(-50% + 25.9px), calc(-50% - 17.47px))}
.pc.back.tier-5 .pent img:nth-child(5){transform:translate(calc(-50% + 63.4px), calc(-50% + 0.33px))}
/* and the black castle takes another eighth of an inch, to open a gap
   between it and the fire castle along the bottom */
/* The bottom pair is lifted so the foot bar and CASTLE clear it. Measured
   against the tier 4 back, where the lowest sprite stops 55.6 px above the
   foot; tier 5's black castle was overlapping it by 11.6. The black is also
   dropped onto the red's baseline -- both are centred rather than
   bottom-aligned, and the two composites differ in height by 18.6 px. */
.pc.back.tier-5 .pent img:nth-child(3){transform:translate(calc(-50% + 25.9px), calc(-50% - 30.15px))}
/* The red castle's box is 285x239 against the black's 237x227, and its extra
   width is nearly all cast shadow -- so at a shared 46.5% the castle itself
   came out 262 px tall against the black's 298. Scaled up to match, and the
   y offset corrected by half the height it gained so the two still share a
   baseline. */
.pc.back.tier-5 .pent img:nth-child(4){width:52.88%;
  transform:translate(calc(-50% + 44.65px), calc(-50% - 29.5px))}
.back .pc-frame{overflow:hidden}
.back .pc-frame::after{content:'';position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 5px #0009;pointer-events:none;z-index:5}

.tier-5{--wash:#0b0b0edd; --edge:#b9b6c6; --ink:#f2f0f7; --accent:#ffffff}
/* the castles sit on near-black, so the frame needs its own faint sheen */
.tier-5 .pc-frame{box-shadow:inset 0 0 0 5px #000, 0 0 0 4px #0008,
  inset 0 0 90px #ffffff0f}
.tier-5.back .pc-tier{text-shadow:0 4px 0 #000, 0 0 30px #ffffff8c}

/* ---------- FRONT ---------- */
.front .pc-frame{background:linear-gradient(#0000 0%,#0000004d 55%,#00000085 100%)}
.fhead{display:flex;justify-content:space-between;align-items:baseline;
  font-size:27px;letter-spacing:.22em;font-weight:700;color:var(--accent);
  border-bottom:4px solid var(--edge);padding-bottom:12px;flex:0 0 auto}
.fhead .fdeck{color:var(--ink);opacity:.7;letter-spacing:.18em;font-size:24px}
.fname{font-size:60px;line-height:1.1;color:var(--ink);font-weight:700;
  margin:22px 0 0;text-shadow:0 4px 9px #000c;flex:0 0 auto}
.fbody{flex:1;display:flex;flex-direction:column;justify-content:center;gap:16px;
  min-height:0;padding-top:14px;position:relative}
.fmark{position:absolute;right:-6px;bottom:-8px;width:250px;opacity:.13;
  pointer-events:none;filter:grayscale(.25)}
/* the castles carry their bases now, so the watermark has more picture in it
   and less of it is the building -- half again as large on tier 5 fronts */
.pc.front.tier-5 .fmark{width:375px}
.fbig{font-size:46px;line-height:1.34;color:var(--ink);margin:0;text-shadow:0 3px 6px #000a}
.fchal{font-size:37px;line-height:1.3;color:var(--ink);margin:0;text-shadow:0 3px 6px #000a}
.fres{border-left:8px solid;padding:11px 13px 13px 17px;background:#00000059;
  border-radius:0 10px 10px 0}
.fres b{display:block;font-size:22px;letter-spacing:.24em;margin-bottom:5px}
.fres span{display:block;font-size:31px;line-height:1.26;color:var(--ink)}
.fres.win{border-color:#7fd97f} .fres.win b{color:#9ee08a}
.fres.ench{border-color:#b9b6c6} .fres.ench b{color:#ded9ea}
.fres.ladder{border-color:var(--edge)} .fres.ladder b{color:var(--accent)}
/* the castle life ladder reads down the card, one rung to a line */
ul.lvl{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
ul.lvl li{display:flex;align-items:baseline;gap:14px;font-size:29px;color:var(--ink);
  border-bottom:2px solid #ffffff1f;padding-bottom:4px}
ul.lvl li:last-child{border-bottom:0}
ul.lvl b{min-width:64px;letter-spacing:.12em;color:var(--accent)}
ul.lvl i{font-style:normal;opacity:.92}
.fres.lose{border-color:#e0705c} .fres.lose b{color:#ff9a86}
.fbar{display:flex;justify-content:space-between;gap:14px;flex:0 0 auto;
  font-size:25px;letter-spacing:.08em;color:var(--ink);opacity:.85;
  border-top:4px solid var(--edge);padding-top:14px;margin-top:16px}
.fbar.odds{flex-wrap:wrap;justify-content:flex-start;gap:4px 20px;font-size:22px}

/* ---------- REAL MAGIC CARDS (Common / Uncommon / Rare tabs) ---------- */
.mgrouph{display:flex;align-items:baseline;gap:14px;margin:26px 0 10px;
  font-size:19px;letter-spacing:.16em;font-weight:700;color:var(--ci);
  border-bottom:2px solid #ffffff1a;padding-bottom:8px}
.mgrouph em{font-style:normal;font-size:13px;letter-spacing:.08em;
  color:#cfc7b4;opacity:.7}
.mgrid{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start;margin-bottom:26px}
/* real cards are reference art, not print art — they sit at roughly half the
   size of a game card at the same setting, so a whole colour fits on screen */
.mcard{--mw:calc(750px * var(--cs) * .55);width:var(--mw);flex:0 0 auto}
.mframe{position:relative;display:block;width:100%;aspect-ratio:5/7;
  border-radius:calc(38px * var(--cs) * .55);
  overflow:hidden;background:#14120f;box-shadow:0 10px 24px #000a;
  outline:2px solid var(--ci);outline-offset:-2px;
  transition:transform .12s, box-shadow .12s}
.mframe:hover{transform:translateY(-3px);box-shadow:0 14px 30px #000c,0 0 0 2px var(--ci)}
.mimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;opacity:0;transition:opacity .25s}
.mcard.ok .mimg{opacity:1}
/* the plate under every card — what you see before the art lands, or instead
   of it when there's no connection */
.mplate{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;padding:12% 10%;
  text-align:center;background:
    radial-gradient(120% 80% at 50% 0%,#ffffff10,#0000 60%), #171410}
.mplate span{font-size:calc(var(--mw) * .085);line-height:1.25;font-weight:700;
  color:var(--ci)}
.mplate i{font-size:calc(var(--mw) * .06);font-style:normal;letter-spacing:.06em;
  color:#cfc7b4;opacity:.5}
.mcard.ok .mplate{display:none}
.mcard.noimg .mframe{outline-style:dashed}
.mx{position:absolute;left:6px;top:6px;z-index:3;font-size:12px;font-weight:700;
  letter-spacing:.05em;color:#f4eddc;background:#000000b8;border-radius:20px;
  padding:2px 8px}
.mmark{position:absolute;right:6px;top:6px;z-index:3;width:22px;height:22px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;letter-spacing:0;
  background:#000000c4;border:1px solid currentColor}
.mmark.mc{color:#c9c9c9} .mmark.mu{color:#a36eff} .mmark.mr{color:#e2be60}
/* served live from Scryfall because the file isn't on disk yet */
.mweb{position:absolute;left:6px;bottom:6px;z-index:3;display:none;
  font-size:9px;font-weight:700;letter-spacing:.14em;color:#ffca63;
  background:#000000c4;border:1px solid #ffca6377;border-radius:4px;padding:2px 5px}
.mcard.web .mweb{display:block}
.mname{margin-top:6px;font-size:12px;line-height:1.25;color:#e6dfcd;opacity:.85}
.mname i{display:block;font-style:normal;font-size:10px;letter-spacing:.1em;
  color:#e2be60;opacity:.8}
.mfilter{background:#0f0d0b;border:1px solid #ffffff26;border-radius:6px;
  color:#efe7d4;padding:6px 10px;font:inherit;font-size:13px;width:190px}
.mtog{display:flex;align-items:center;gap:7px;font-size:12px;letter-spacing:.08em;
  color:#cfc7b4;opacity:.85;cursor:pointer;user-select:none}

@media print{
  header,.toolbar,h1,h2,h3,p.lede,p.note{display:none}
  body{background:#fff}
  main{padding:0;max-width:none}
  .pc{box-shadow:none}
  .pcwrap{break-inside:avoid;page-break-inside:avoid}
}


/* ---- Tier 3 riddles ------------------------------------------------- *
   The card is a fixed 750 x 1050 box scaled by transform, so everything in
   here is set in flat px like the rest of the frame -- multiplying by --cs
   as well would shrink it twice over.
   The answer sits along the foot at the same size as the tier 2 footer, and
   is the one line the guessing player is not meant to read. */
.pc .fbar.fans{ align-items: flex-start; }
.pc .fbar.fans span:first-child{
  flex: 1 1 auto;
  white-space: normal;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
}
.pc .fbar.fans b{
  letter-spacing: .10em;
  opacity: .62;
  margin-right: 10px;
}
.pc .fbar.fans span:last-child{ flex: 0 0 auto; white-space: nowrap; }


/* ---------- HUNTER ---------------------------------------------------- *
   The portrait is the card. It sits in a sunken frame with the enemy's own
   black background kept, because that is how the game showed them. */
/* the body is centred on the other decks; here it is stacked from the top so a
   tall portrait can never ride up over the name */
.pc.tier-h .fbody{ justify-content:flex-start; gap:10px; }
/* the enemy stands on the card itself: no frame, no backdrop */
.pc.tier-h .hportrait{
  display:flex; justify-content:center; align-items:flex-end;
  margin:2px 0;
}
.pc.tier-h .hportrait img{
  width:296px; height:auto; image-rendering:pixelated;
  filter:drop-shadow(0 12px 18px #0009);
}
.pc.tier-h .hback img{ image-rendering:pixelated; }
.pc.tier-h ul.lvl.hlvl li{ font-size:25px; }
.pc.tier-h ul.lvl.hlvl b{ min-width:56px; }

/* ---------- PLAYER ---------------------------------------------------- *
   The portrait is the whole card: the fourteen faces the game offers when a
   run starts, standing on the card itself with the name under their feet. */
.pc.tier-p .fbody{ justify-content:center; }
.pc.tier-p .pportrait{
  display:flex; justify-content:center; align-items:flex-end;
}
.pc.tier-p .pportrait img{
  height:600px; width:auto; image-rendering:pixelated;
  filter:drop-shadow(0 14px 20px #0009);
}
.pc.tier-p .fname.pname{
  text-align:center; margin:6px 0 0;
}
.pc.tier-p.back .brow img{ image-rendering:pixelated; max-width:19%; }