/*
  static/cards.css -- one card, at any size.

  Laid out like the Godot card maker's face, without its frame image (which
  carries a margin for a glow shader we don't draw): the color fill, the
  rune in the upper half, name, short line and type beneath.
  Every measure is a percentage of the card or a cqw (container width)
  unit, so a card is the same picture at 60px or 300px wide.
*/

@font-face { font-family: "Quintessential"; src: url(/static/fonts/Quintessential-Regular.ttf); font-display: swap; }
@font-face { font-family: "Sofia Sans Condensed"; src: url(/static/fonts/SofiaSansCondensed-VariableFont_wght.ttf); font-weight: 100 900; font-display: swap; }

.card {
  --w: 120px;
  position: relative;
  width: var(--w);
  /* The visible card inside Godot's 512x736 frame image: 415x638. */
  aspect-ratio: 415 / 638;
  container-type: inline-size;
  flex: none;
  user-select: none;
  color: var(--ink, #fff);
  /* Corners as a proportional ellipse, like the runesofzun.com card pages:
     the horizontal % is of the width, the vertical % of the height, and
     the vertical one is derived so the corner stays a true circle. One knob:
     --card-radius, the corner as a % of the card's width (the short side). */
  --card-radius: 6%;
  border-radius: var(--card-radius) / calc(var(--card-radius) * 415 / 638);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s;
}
.card-xs { --w: 22px; }
.card-sm { --w: 64px; }
.card-md { --w: 112px; }
.card-lg { --w: 280px; }

/* The face: the type's color filling the whole card, a thin dark edge and
   a soft inner light standing in for the frame. */
.card-fill {
  position: absolute; inset: 0; border-radius: inherit;
  background:
    radial-gradient(120% 70% at 50% 25%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(180deg, var(--fill), color-mix(in srgb, var(--fill) 60%, #000));
  box-shadow: inset 0 0 0 .8cqw rgba(0,0,0,.55), inset 0 0 0 1.6cqw rgba(255,255,255,.12), 0 2px 6px rgba(0,0,0,.45);
}
/* The back: Godot's back image, cropped to the same card. */
.card-back {
  background: #15171b url(/static/img/back.png) no-repeat 48.45% 50% / 123.37% 115.36%;
  box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.45);
}
.card-rune {
  position: absolute; left: 22%; width: 56%; top: 7.5%; aspect-ratio: 1;
  background: var(--ink);
  -webkit-mask: var(--rune) center / contain no-repeat;
  mask: var(--rune) center / contain no-repeat;
  filter: drop-shadow(0 0 2cqw rgba(0,0,0,.6));
}
.card-runes { position: absolute; left: 7%; top: 6%; display: flex; flex-direction: column; gap: 2cqw; }
.rune-pip { width: 6cqw; height: 6cqw; border-radius: 50%; border: 1cqw solid rgba(0,0,0,.4); }
.rune-material { background: #f2c230; }
.rune-space { background: #4aa3ff; }
.rune-time { background: #c46cf0; }
.rune-soul { background: #f4f4f4; }

.card-name {
  position: absolute; left: 4%; right: 4%; top: 54.5%;
  text-align: center; font-family: "Quintessential", serif; font-size: 16cqw; line-height: 1;
  -webkit-text-stroke: .6cqw #000; paint-order: stroke fill; letter-spacing: .3cqw;
}
.card-type {
  position: absolute; left: 4%; right: 4%; bottom: 5%;
  text-align: center; font-family: "Sofia Sans Condensed", sans-serif; font-weight: 600;
  opacity: .75; font-size: 8cqw; letter-spacing: .5cqw; text-transform: uppercase;
}
/* The face: name, the short line right under it, then the type line.
   Full rules live in the details box. */
.card-text {
  position: absolute; left: 8%; right: 8%; top: 69%; bottom: 14%;
  display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden;
  font-family: "Sofia Sans Condensed", sans-serif; font-size: 10cqw; line-height: 1.1; font-weight: 500;
}

.card-sm .card-type { display: none; }
.card-sm .card-name { top: 62%; font-size: 18cqw; }
.card-xs > * { display: none; }

.card-empty { border: 2px dashed rgba(255,255,255,.15); }

/* Interaction states, used by the table */
/* Playable cards are highlighted, nothing more: no lift, and nothing else
   is dimmed, so every card in hand stays easy to read. */
.card.selectable {
  cursor: pointer;
  --glow: 233,196,106;
  box-shadow: 0 0 0 1.5px rgb(var(--glow)), 0 0 7px 1px rgba(var(--glow), .75), 0 0 14px 3px rgba(var(--glow), .3);
  animation: playable 2.2s ease-in-out infinite;
}
@keyframes playable {
  50% { box-shadow: 0 0 0 1.5px rgb(var(--glow)), 0 0 9px 2px rgba(var(--glow), .9), 0 0 18px 4px rgba(var(--glow), .4); }
}
@media (prefers-reduced-motion: reduce) { .card.selectable { animation: none; } }
.card.picked { animation: none; box-shadow: 0 0 0 2px #fff, 0 0 8px 2px rgba(255,255,255,.85), 0 0 16px 4px rgba(255,255,255,.35); }
/* A Modifier in hand that fits the card being hovered. */
.card.fits { outline: 2px dotted #e9c46a; outline-offset: 4px; }

/* The details box (Godot's card_tooltip). It can be moused into, so it
   takes pointer events while shown and none while hidden. */
.card-tip {
  position: fixed; z-index: 50; width: 300px; pointer-events: none;
  opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s;
  background: #1b1d24; border: 1px solid #4a4030; border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0,0,0,.6); color: #e9e6df;
  font: 500 15px/1.4 "Roboto Condensed", sans-serif;
}
.card-tip.show { opacity: 1; transform: none; pointer-events: auto; }
.tip-head { padding: .7rem .9rem .6rem; border-bottom: 1px solid #30343f; border-radius: 10px 10px 0 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 45%, transparent), transparent); }
.tip-head strong { display: block; font: 1.35rem "Quintessential", serif; }
.tip-hint { color: #c9c4b6; }
.tip-text { padding: .7rem .9rem; border-bottom: 1px solid #30343f; }
.tip-text .digit { color: #ffe066; }
/* A number this play changed: brighter, underlined, printed value on hover. */
.tip-text .digit.changed { color: #7dff9a; text-decoration: underline dotted; }
.tip-text .fx-label { font-weight: 700; }
.card-tip b, .card-tip strong { font-weight: 700; }
.tip-flavor { padding: .55rem .9rem; font: 1.05rem/1.35 "Quintessential", serif; color: #b8b29f; border-bottom: 1px solid #30343f; }
.tip-details { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; margin: 0; padding: .6rem .9rem; font-size: .9rem; }
.tip-details dt { color: #9a9789; } .tip-details dd { margin: 0; }
/* A term with its own definition, shown on hover (or focus). */
.tip-word { position: relative; border-bottom: 1px dotted #8d8774; cursor: help; outline: none; }
.tip-def {
  position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  width: max-content; max-width: 220px; padding: .4rem .6rem; border-radius: 6px;
  background: #2b2e38; border: 1px solid #4a4030; color: #e9e6df; font-size: .85rem; line-height: 1.3;
  box-shadow: 0 6px 16px rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: opacity .1s;
  pointer-events: none; z-index: 1;
}
.tip-word:hover .tip-def, .tip-word:focus .tip-def { opacity: 1; visibility: visible; }