/*
 * A CARD, wherever one is drawn: in a hand, on a row, on the reference sheet.
 * The face is built by ui/cards.js and every rule here paints what it built,
 * so a card is one shape in every place it appears.
 */

/* hand */
.hand { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 3px; }
.card {
  position: relative; width: 63px; height: 86px; padding: 11px 4px; cursor: grab;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 8px; --edge: #cdc5b4; border: 1px solid var(--edge);
  background: linear-gradient(158deg, #ffffff 0%, #f4f0e7 100%);
  box-shadow: 0 1px 3px rgba(60, 50, 30, .18);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
/* Lifting a card and marking it with the accent is what a hand does. It is
   scoped to the hand on purpose: on the reference sheet a card is not being
   picked up, and recolouring its edge would paint over the green and blue the
   two working specials are identified by. */
@media (hover: hover) {
  .hand .card:hover {
    transform: translateY(-5px); --edge: var(--accent); z-index: 20;
    box-shadow: 0 8px 16px rgba(60, 50, 30, .25);
  }
}
.card .corner { position: absolute; top: 6px; left: 6px; font-size: 10px; line-height: 1; }
/* A word in a line of text that happens to be a button: the log offers the
   night rather than printing it. */
.asLink {
  font: inherit; background: none; border: 0; padding: 0 0 0 6px;
  color: var(--accent); text-decoration: underline; cursor: pointer;
}
.asLink:hover { text-decoration: none; }
/*
 * THE ONE MARK THAT HAS TO READ ON SIX PAINTS AT ONCE. Every other card picks
 * its ink for the paint it is printed on -- the joker is printed on all of
 * them, and the mark sits exactly where the six meet, so any one ink is
 * invisible on two of them. It is cut in the parchment the cards are made of
 * and outlined in the ink, which is an EDGE and not a wash: the colours still
 * run clean to the border, and there is nothing on the card but the mark.
 */
.card.joker.wild .glyph, .card.joker.wild .corner {
  color: #f7f3e8;
  /*
   * In ems, so the outline is the same weight on the big mark and the small
   * one in the corner -- a stroke in pixels is a hairline on one and swallows
   * the other.
   *
   * AND THIS THICK AND NO THICKER. The outline grows OUTWARDS from the mark,
   * so it fills the star's own notches as it goes: past about a fifth of an em
   * the points close up and it stops being a star at all.
   */
  -webkit-text-stroke: .19em #23201a;
  paint-order: stroke fill;
}
.card .glyph { font-size: 26px; line-height: 1; }
/* One label for every card in the game, whichever side of the table holds it,
   taking the card's own ink so it works on paint and on parchment alike. */
.card .cname, .card .ctitle {
  font-size: 9px; font-weight: 500; letter-spacing: .02em; line-height: 1.3;
  text-align: center; color: inherit; opacity: .78;
}
/*
 * IN THE FLOW, under the drawing, which is what a museum card's title has
 * always done. Pinned to the bottom instead, a name that runs to two lines
 * grows UPWARDS into the drawing, and lifting the drawing to make room lifts
 * it on the one-word cards too -- so the cards with short names go top-heavy
 * to fix a card with a long one. Centred as a group, every card solves this
 * for itself whether its name takes one line or two.
 */
.card .cname { margin-top: 3px; }
/*
 * A museum card not printed with a floor is parchment, the same stock the
 * burglars' specials are cut from: one suit for "this card is not a floor",
 * on both sides of the table. Emphatically not near-white, which is marble to
 * within a shade and made a museum card and a marble one read as one card.
 */
.card.museum {
  background: linear-gradient(158deg, #EFE6D0 0%, #E0D4B4 100%);
  --edge: #B29B6E;
}

/* A museum card printed with a floor is painted that floor, exactly as the
   burglar's card and the room are, so all three read as the same six things.
   Everything on it then takes the ink the paint chose, or the fixed greys and
   golds would fall apart on slate and carpet. */
.card.museum .cglyph { font-size: 22px; line-height: 1; margin-bottom: 3px; }
/*
 * The one museum card painted in six colours at once: its name can land on
 * slate or on carpet, so it carries its own plate rather than trusting the
 * floor under it. The same answer the gallery names take on the board.
 */
/*
 * A band right across the card, not a label sitting on it: stretched to the
 * card's own width and pulled out past its padding, and open on all four
 * sides. A boxed plate reads as a sticker stuck on the artwork; a band with no
 * rules on it reads as the museum's own paper showing through the colour --
 * which is what it is, since it is painted in the same parchment the rest of
 * their deck is cut from. The gallery names on the board do the same thing.
 */
.card.museum.noisy .ctitle {
  background: linear-gradient(158deg, #EFE6D0 0%, #E0D4B4 100%);
  color: #2b2822; opacity: 1;
  align-self: stretch; margin: 0 -4px; padding: 8px 4px;
}
/*
 * Card explanations go in a strip under the hand rather than in a floating
 * overlay: the side column is a scroll container, so anything overflowing it
 * was being clipped against the board.
 */
.card { cursor: grab; }
.card:active { cursor: grabbing; }
/*
 * WHAT A CARD COSTS, AS A LADDER. Full colour steps. A gold-hatched card pays
 * the shutters -- the card, and not the turn. A washed-out one cannot be put
 * down at all, and it says so under the pointer, because picking one up and
 * finding nothing lights up is a worse way to learn it.
 *
 * IT KEEPS ITS COLOUR. A dead card was grey and nearly transparent, which told
 * you it was dead and stopped telling you which floor it was -- and which floor
 * is the whole of what a floor card says. Enough saturation goes to read as
 * spent, and no more.
 */
.card.dead { opacity: .55; filter: saturate(.45); cursor: not-allowed; }
/* which floor a joker is, asked where the pile is asked */
/* one column, every choice the same width -- they are a list of equals, and
   ragged edges read as a difference between them that is not there */
.jpick { display:flex; flex-direction:column; align-items:stretch; gap:5px;
  margin-bottom:8px; }
.jlead { font-size:12px; color:var(--dim); }
.jfloor, .jcancel { width:100%; box-sizing:border-box; text-align:left;
  border-radius:4px; padding:5px 9px; cursor:pointer; font:inherit; }
.jfloor { display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  border:none; line-height:1.15; }
.jfloor b { font-size:12px; }
.jroom { font-size:11px; opacity:.78; }
.jcancel { border:1px solid var(--rule, #cfc7b4); background:transparent;
  color:var(--dim); font-size:12px; }

/*
 * A CARD COMING OFF THE DECK. It is already in its place when the hand is drawn
 * -- the row has its full height and nothing below the hand moves -- and then it
 * drops into that place. The still frame at the start is the hand making room:
 * the space is there for a beat before anything falls into it, so the card lands
 * on a settled row rather than shouldering one open as it arrives.
 *
 * No fill either side. The card's own transform is what lifts it under the
 * pointer, and an animation left holding the property would hold the hover down
 * with it for the rest of the night.
 */
@keyframes cardArrives {
  0%   { opacity: 0; transform: translateY(-30px); }
  30%  { opacity: 0; transform: translateY(-30px);
         animation-timing-function: cubic-bezier(.34, .78, .48, 1); }
  74%  { opacity: 1; transform: translateY(5px); }
  100% { opacity: 1; transform: translateY(0); }
}
.card.arriving { animation: cardArrives .58s; }

/*
 * AND IT KEEPS A DOT UNTIL IT IS READ, because the drop happens where nobody is
 * looking. On one screen the card comes back behind the panel that ends your
 * turn, and three seats act before the hand is on the page again -- so the
 * motion is for whoever happened to be watching, and this is for everyone else.
 *
 * NO COLOUR AT ALL, because there is none left that means this. Blue is a card
 * being picked up and every place it could be put down; red is a burglar caught
 * at the reveal; green is an exhibit carried out; the two route inks are the
 * burglars themselves. It was gold, which is a turn with something pressing on
 * it -- and gold is also the one hue that cannot carry here, at 1.6 against
 * slate and 1.7 against parquet, mosaic and carpet.
 *
 * PAPER INSIDE, INK OUTSIDE, and the pair is the point: a hand holds nine
 * different grounds -- six floor paints, the specials' parchment, the tape's
 * near-black, a plain back -- and no single value reads on all of them. Paper
 * fails on marble, parchment and a back; ink fails on carpet and the tape; and
 * they fail on DIFFERENT ones. So whichever half the card kills, the other
 * carries it: 5.7 at worst across the nine, where the gold was 1.6.
 */
.hand .card.fresh::after {
  content: ''; position: absolute; top: 5px; right: 5px; z-index: 2;
  width: 7px; height: 7px; border-radius: 50%; pointer-events: none;
  background: #fffdf8;
  box-shadow: 0 0 0 2.2px #23262c;
}
/* The dot says which card it is; the drop only says it more loudly. */
@media (prefers-reduced-motion: reduce) { .card.arriving { animation: none; } }

/* set aside on the pile, waiting for the second card that ends the turn */
.card.waiting { outline: 2px dashed var(--accent); outline-offset: 2px; opacity: .75; }
/* where this card may go, shown the moment it is picked up */
body.dragging [data-drop] { transition: none; }
/* ...except the heaps beside the board, which are a pile of cards rather than a
   slot on a row and wear the brown a thrown card already wears -- see .pheap */
body.dragging [data-drop].ok:not(.pheap) {
  outline: 2px dashed var(--accent); outline-offset: 1px;
  background: rgba(31, 111, 156, .14);
}
/* and on the board, the slot actually under the card */
body.dragging [data-drop].over:not(.pheap) {
  outline-style: solid; background: rgba(31, 111, 156, .26);
}
body.dragging [data-drop]:not(.ok) { opacity: .3; }
/*
 * A CARD IN YOUR HAND IS NOT SOMETHING THE BROWSER MAY HAVE. touch-action tells
 * it not to read a finger on a card as a scroll or a pinch, which is the whole
 * of why a card could not be dragged on a tablet: the browser claimed the
 * gesture, cancelled the pointer and the card never left the hand. Only the
 * cards that can be picked up -- the reference sheet is a page to scroll.
 */
.card[data-on-pointerdown] {
  touch-action: none; -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/*
 * PICKED UP, AND STILL IN THE HAND. A tap picks a card up and leaves it there
 * -- the only way to play one with a finger that does not ask the same hand to
 * carry a card and scroll the board at once -- so it has to look picked up for
 * as long as it is waiting to be aimed.
 */
.hand .card.lifted {
  transform: translateY(-7px); --edge: var(--accent); z-index: 20;
  box-shadow: 0 10px 18px rgba(60, 50, 30, .3);
}
/* and once a copy of it is following the pointer, the card it was copied from
   is the space it came out of */
.hand .card.lifted.gone { opacity: .25; box-shadow: none; }
/*
 * THE CARD FOLLOWING THE POINTER. A copy, over everything, and not hit-testable
 * -- what a drop lands on is read straight off the point under the pointer, and
 * a card in the way of that point would be the only thing ever under it.
 */
.card.flying {
  position: fixed; left: 0; top: 0; margin: 0; z-index: 400;
  pointer-events: none; transition: none; animation: none; opacity: .95;
  transform-origin: top left; cursor: grabbing;
  box-shadow: 0 14px 28px rgba(40, 34, 20, .38);
  --edge: var(--accent);
}
.card.floorcard .corner { color: inherit; opacity: .8; }
/* Specials are a different suit: parchment body, heavier edge, a label at the
   top where a floor card carries its own glyph. */
.card.special {
  background: linear-gradient(158deg, #efe6d0 0%, #e3d8bd 100%);
  --edge: #b09a70; border: 1.5px solid var(--edge); box-shadow: 0 1px 3px rgba(60, 50, 30, .22);
}
/*
 * Which way up the card is played, said twice over: by the shape, and by the
 * edge it sits against. A card that goes down face down carries a triangle
 * pointing down at its top edge; one that goes down face up carries a
 * triangle pointing up at its bottom edge. It is drawn in the card's own ink,
 * so it works on the painted floors and the parchment alike, and kept faint
 * because it is a reminder, not a thing to read.
 */
.card .facing {
  position: absolute; left: 50%; width: 0; height: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  pointer-events: none;
}
/*
 * Both marks sit off the centre line, and to opposite sides of it: down-and-
 * right at the top, up-and-left at the bottom. That leaves the middle to the
 * labels, and gives the two a rotational rather than mirrored relationship,
 * so a glance at either corner tells you which one you are looking at.
 */
.card.facedown .facing { top: 0; margin-left: 4px; border-top: 5px solid var(--edge); }
.card.faceup .facing { bottom: 0; margin-left: -16px; border-bottom: 5px solid var(--edge); }
.card.special.sneakers { --edge: #2f8f5b; border: 2.5px solid var(--edge); }
.card.special.hiddendoor { --edge: #2f6f9f; border: 2.5px solid var(--edge); }
.cardinfo {
  margin-top: 9px; padding: 7px 9px; min-height: 46px;
  background: #f2eee5; border: 1px solid #ded7c8; border-radius: 7px;
  font-size: 11.5px; line-height: 1.45; color: #3d3a34;
}
.cardinfo .hint { color: #9a9488; }

/* trails */
/*
 * WHOSE ROW IT IS SITS BESIDE IT, not above it. A line of its own cost every
 * row its own height twice over -- once for each row on screen -- and took it
 * from the board, which is the thing being read. Two short lines to the left
 * of the slots say the same thing in the space the slots were already using.
 *
 * It is taken out of the flow so the slots stay centred on the BOARD: a label
 * that pushed them along would centre them on what was left of the row.
 */