/* Last One Standing's look: game night (docs/last-one-standing.md, "Its
   look"). An indigo evening under a warm lamp; on it your tray, molded red
   plastic with a window for each of the 24 cards, and across from you the
   other player's, in blue. Each card is a picture on its tint over a cream
   name plate, in a white frame that flips down on its hinge to show the
   tray's plastic. This file is the tokens (the house's, the room kit's and
   the game's own: the trays, the cards) and the cards themselves; it's
   loaded before the room's structure (games/room/room.css), the table
   (table.css) after it. The Django pages
   (games/templates/last-one-standing/page.html) wear just this.

   Faces, both OFL and bundled in fonts/: Rubik (the display, and the
   cards' names: round and sturdy, a toy's own lettering) and Figtree
   (everything else). */

@font-face { font-family: "Rubik"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/rubik-400-800-latin.94df5f5371c1.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/figtree-400-800-latin.392aed3eb142.woff2") format("woff2"); }

:root {
  /* the house's (docs/design-system.md) */
  --t-display: clamp(32px, 7vw, 44px); --t-heading: 20px; --t-body: 16px; --t-label: 16px; --t-note: 14px;
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 40px;
  --pick-tint: color-mix(in srgb, currentColor 16%, transparent);
  --pick-ring: inset 0 0 0 2px currentColor;
  --pick-weight: 700;

  /* the trays: yours red, theirs blue, molded plastic */
  --tray: #d6412f; --tray-hi: #f06b52; --tray-lo: #9c2a1d; --tray-deep: #7a1f15;
  --their: #2f6fd6; --their-hi: #5d95ef; --their-lo: #1c4a9b;
  /* the cards: a white frame, the picture, a cream name plate */
  --card: #fffdf8; --card-edge: #e3d9c6; --plate: #fff1d0; --plate-ink: #2b2233;
  --card-shadow: 0 2px 0 rgba(60, 10, 5, .35), 0 4px 8px rgba(0, 0, 0, .25);
  --ruled: #e5484d;
  --name: "Rubik", "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* the room kit's (docs/design-system.md, "The room kit"), on game night */
  --room: #1b1530;
  --table: radial-gradient(ellipse at 50% 0%, #3b2d66, #2a2049 55%, #1b1530);
  --rail: 0 solid transparent;
  --rail-radius: 0;
  --panel: rgba(10, 6, 24, .32);
  --panel-edge: 1.5px solid rgba(232, 222, 255, .14);
  --panel-radius: 12px;
  --sheet: #2b2250;
  --chip: rgba(0, 0, 0, .25);
  --chip-edge: 1.5px solid rgba(240, 234, 255, .3);
  --chip-radius: 999px;
  --ink: #f5f1ff;
  --soft: #c9bfe8;
  --turn: #ffd34d;
  --good: #98e2a8;
  --bad: #ff9a85;
  --focus: #f5f1ff;
  --btn: #ffd34d;
  --btn-ink: #2b2233;
  --btn-edge: 2px solid #ffd34d;
  --btn2: transparent;
  --btn2-ink: #f5f1ff;
  --btn2-edge: 2px solid #f5f1ff;
  --btn-radius: 10px;
  --btn-weight: 700;
  --confirm: #ff9a85;
  --confirm-ink: #2a0d06;
  --turn-ink: #2b2233;
  --seat-ink: #111;
  --field-edge: 1.5px solid color-mix(in srgb, currentColor 50%, transparent);
  --ui-font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display: "Rubik", "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display-weight: 800;

  color-scheme: dark;
}

body { background: var(--room); }

/* ── a card (cards.js): the picture over its name, in a white frame ─────
   Sized by --cw (its width) and, on the tray, --ch (its height), --pic
   (its picture's side) and --fs (its name's size), from table.js fitTray:
   where the rows are short (a phone), a card is shorter than the usual
   1 : 1.26 and its picture smaller, never its name. Everything else in it
   scales from --cw. A name too long for its plate is set a little smaller
   (cards.js fitName), and breaks a long word only at the dictionary's
   breaks (its `hy`). The frame turns over where it stands to show the tray. */
.lcard {
  --cw: 96px; --r: calc(var(--cw) * .09);
  all: unset; box-sizing: border-box; position: relative; display: block; flex: none;
  width: var(--cw); height: var(--ch, calc(var(--cw) * 1.26)); -webkit-tap-highlight-color: transparent;
  /* (a finger held on a card shows it bigger: no callout, no selection, no magnifier) */
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.lcard .flap { position: absolute; inset: 0; }
.lcard .face, .lcard .back { position: absolute; inset: 0; border-radius: var(--r); }
.lcard .face {
  display: flex; flex-direction: column; padding: calc(var(--cw) * .045); gap: calc(var(--cw) * .035);
  background: var(--card); box-shadow: inset 0 0 0 1px var(--card-edge), var(--card-shadow);
}
.lcard .pic { flex: none; align-self: center; width: var(--pic, 100%); aspect-ratio: 1; border-radius: calc(var(--r) * .7); overflow: hidden; }
.lcard .pic svg { display: block; width: 100%; height: 100%; }
.lcard .plate {
  flex: 1; min-height: 0; display: grid; place-items: center; padding: 0 calc(var(--cw) * .03); border-radius: calc(var(--r) * .6); overflow: hidden;
  background: var(--plate); color: var(--plate-ink);
  font: 700 var(--fs, clamp(9px, calc(var(--cw) * .105), 15px))/1.05 var(--name);
  text-align: center; letter-spacing: -.005em;
}
.lcard .plate span { display: block; max-width: 100%; overflow: hidden; overflow-wrap: normal; word-break: normal; hyphens: manual; -webkit-hyphens: manual; text-wrap: balance; }
/* flipped down (cards.js turns it through its edge, the house's flip): the
   tray's plastic, a window's worth, with the game's mark pressed in */
.lcard .back {
  display: none; place-items: center;
  background: linear-gradient(180deg, var(--tray-lo), var(--tray-deep)); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .25), inset 0 2px 0 rgba(255, 255, 255, .12);
}
.lcard .back svg { width: 46%; height: auto; opacity: .55; }
.lcard.down .face { visibility: hidden; }
.lcard.down .back { display: grid; }
.lcard.theirs .back { background: linear-gradient(180deg, var(--their-lo), #143675); }

/* pressing and pointing */
button.lcard { cursor: pointer; }
button.lcard:focus-visible .face, button.lcard:focus-visible .back { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) { button.lcard:hover:not(.down) .face { transform: translateY(-2px); } }
.lcard .face { transition: transform var(--m-quick, 120ms); }

/* ruled out by the last answer (the helper): striped over, a red cross in the corner */
.lcard.out .face::after {
  content: ''; position: absolute; inset: 0; border-radius: var(--r);
  background: repeating-linear-gradient(-45deg, rgba(229, 72, 77, .22) 0 6px, transparent 6px 12px);
  box-shadow: inset 0 0 0 2.5px var(--ruled);
}
.lcard .cross {
  position: absolute; z-index: 2; top: calc(var(--cw) * -.06); right: calc(var(--cw) * -.06); width: max(18px, calc(var(--cw) * .22)); aspect-ratio: 1;
  display: none; place-items: center; border-radius: 50%; background: var(--ruled); box-shadow: 0 1px 3px rgba(0, 0, 0, .4); backface-visibility: hidden;
}
.lcard .cross svg { width: 58%; height: 58%; }
.lcard.out:not(.down) .cross { display: grid; }

/* guessing: every card still standing can be chosen */
.lcard.pickable .face { box-shadow: inset 0 0 0 1px var(--card-edge), 0 0 0 3px var(--turn), var(--card-shadow); animation: losinvite 1.4s ease-in-out infinite alternate; }
@media (hover: hover) { button.lcard.pickable:hover .face { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--card-edge), 0 0 0 5px var(--turn), 0 0 16px 3px color-mix(in srgb, var(--turn) 55%, transparent), var(--card-shadow); } }
@keyframes losinvite { to { filter: brightness(1.07); } }
@media (prefers-reduced-motion: reduce) { .lcard.pickable .face { animation: none; } }

/* the end: the card that was theirs, ringed and tagged */
.lcard.answer .face { box-shadow: inset 0 0 0 1px var(--card-edge), 0 0 0 4px var(--turn), 0 0 18px 4px color-mix(in srgb, var(--turn) 50%, transparent), var(--card-shadow); }
.lcard.answer.down .face { visibility: visible; }
.lcard.answer.down .back { display: none; }
.lcard.missed .face { box-shadow: inset 0 0 0 1px var(--card-edge), 0 0 0 4px var(--bad), var(--card-shadow); }
.lcard.missed.down .face { visibility: visible; }
.lcard.missed.down .back { display: none; }
.lcard .tagline.miss { background: var(--bad); color: var(--confirm-ink); }
.lcard .tagline {
  position: absolute; z-index: 2; left: 50%; bottom: calc(var(--cw) * -.1); translate: -50% 0; white-space: nowrap;
  padding: 2px 8px; border-radius: 999px; background: var(--turn); color: var(--turn-ink); font: 800 11px/1.3 var(--ui-font); box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}