/* Victory-award cards (rendered by wppw_web.card_html), shared by the site and /admin.
   A trading card: a metallic frame (gold or silver), a cream face with the award's
   medallion, name, what it does and the catch. */
.wcard { --metal: linear-gradient(135deg, #fff6c9 0%, #e8c656 18%, #b8862b 42%, #f3dc8a 62%, #a6741c 82%, #f6e7a6 100%);
  --ink: #5a3f08; --tint: #fbf3d6;
  position: relative; display: inline-flex; flex-direction: column; width: 190px; min-height: 270px; padding: 6px;
  background: var(--metal); border-radius: 10px; box-shadow: 0 3px 0 rgba(0,0,0,.18), 0 6px 14px rgba(0,0,0,.18);
  color: #2b2620; text-align: center; vertical-align: top; overflow: hidden; font-family: 'Oswald', sans-serif; }
.wcard.silver { --metal: linear-gradient(135deg, #ffffff 0%, #d9dde1 18%, #8f979e 42%, #eef0f2 62%, #7d858c 82%, #f4f5f6 100%);
  --ink: #3d454c; --tint: #f1f2f2; }
/* Dark Age: blackened iron, light lettering */
.wcard.dark { --metal: linear-gradient(135deg, #77706a 0%, #2e2a26 20%, #121110 45%, #4a443d 62%, #1d1b18 82%, #625a50 100%);
  --ink: #e9dcc0; --tint: #2a2622; }
.wcard.dark .wcard-face { border-color: rgba(255,255,255,.18); }
.wcard.dark .wcard-name { color: #f6ead0; }
.wcard.dark .wcard-text { color: #ddd0b4; }
.wcard.dark .wcard-catch { color: #f0a090; border-top-color: rgba(255,255,255,.2); }
/* the sheen across the metal */
.wcard::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 10px;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45) 45%, transparent 60%); }
.wcard-face { position: relative; z-index: 1; /* above the sheen, so the text stays crisp */
  flex: 1; display: flex; flex-direction: column; background: var(--tint); border-radius: 6px;
  border: 1px solid rgba(0,0,0,.25); padding: 10px 10px 8px; }
.wcard-tier { font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); }
.wcard-medal { width: 54px; height: 54px; margin: 8px auto 6px; border-radius: 50%; background: var(--metal);
  border: 2px solid rgba(0,0,0,.28); display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.35); color: var(--ink); font-size: 26px; line-height: 1; }
.wcard-name { overflow-wrap: anywhere; font-size: 17px; font-weight: 700; text-transform: uppercase; line-height: 1.05; color: #2b2620; margin-bottom: 7px; }
.wcard-text { font-family: Georgia, 'Times New Roman', serif; font-size: 11.5px; line-height: 1.35; color: #3a342a; }
.wcard-catch { margin-top: auto; padding-top: 7px; border-top: 1px dashed rgba(0,0,0,.25);
  font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 10.5px; line-height: 1.3; color: #8f2a20; }
.wcard-catch b { font-style: normal; font-family: 'Oswald', sans-serif; letter-spacing: .08em; text-transform: uppercase; font-size: 9px; }
.wcard-foot { margin-top: 6px; font-size: 8px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); opacity: .8; }

/* small: a faction's cards in hand. A "collapsible" card is small until clicked open. */
.wcard.mini, .wcard.collapsible:not(.open) { width: 112px; min-height: 0; padding: 4px; border-radius: 7px; }
:is(.wcard.mini, .wcard.collapsible:not(.open)) .wcard-face { padding: 6px 5px; }
:is(.wcard.mini, .wcard.collapsible:not(.open)) .wcard-medal { width: 30px; height: 30px; font-size: 15px; margin: 4px auto 3px; }
:is(.wcard.mini, .wcard.collapsible:not(.open)) .wcard-name { font-size: 11px; margin: 0; }
:is(.wcard.mini, .wcard.collapsible:not(.open)) :is(.wcard-text, .wcard-catch, .wcard-foot) { display: none; }
.wcard.collapsible { cursor: pointer; }
.wcard.collapsible:focus-visible { outline: 2px dotted #2b2620; outline-offset: 2px; }

.wcard-grid { display: flex; flex-wrap: wrap; gap: 14px; }
/* a card you can pick (the admin draft): the whole card is the button */
button.wcard { border: 0; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease;
  /* undo the admin's general button styling */
  white-space: normal; height: auto; line-height: normal; padding: 6px; background: var(--metal); color: #2b2620;
  font-family: 'Oswald', 'Arial Narrow', sans-serif; font-size: inherit; font-weight: normal; letter-spacing: normal; }
button.wcard .wcard-face { width: 100%; }
button.wcard:hover, button.wcard:focus-visible { transform: translateY(-4px) rotate(-1deg);
  box-shadow: 0 6px 0 rgba(0,0,0,.18), 0 12px 22px rgba(0,0,0,.25); outline: none; }
.wcard.played { filter: grayscale(.8); opacity: .55; }