/* Resource and progress cards follow the tile style (html[data-skin], set in board.js).
   Plain keeps the default faces in hand.css.
   The style gallery draws several skins at once. Each sample is a .skin-face, and the
   scope stops there so the page's own skin does not paint over the sample. */

@scope (html[data-skin="flat"], .skin-face[data-skin="flat"]) to (.skin-face) {
  .pcard {
    background: color-mix(in srgb, var(--c) 72%, #fff);
    border: 3px solid #141110; border-radius: 4px;
    box-shadow: 3px 3px 0 #141110; color: #141110;
  }
  .pcard-name, .pcard-corner { font-weight: 900; }
  .pcard.commodity {
    background: color-mix(in srgb, var(--c) 78%, #fff); color: #141110;
    border-color: color-mix(in srgb, var(--c) 45%, #141110);
  }
  .pcard-ribbon { background: #141110; color: #fff6e0; }
}

@scope (html[data-skin="neon"], .skin-face[data-skin="neon"]) to (.skin-face) {
  .pcard {
    background: #07060d; color: var(--c);
    border: 1px solid var(--c); border-radius: 4px;
    box-shadow: 0 0 12px color-mix(in srgb, var(--c) 45%, transparent);
  }
  .pcard-art { filter: brightness(0) invert(1); }
  .pcard-name, .pcard-corner { font-family: ui-monospace, monospace; letter-spacing: 0.06em; }
  .pcard.commodity {
    background: color-mix(in srgb, var(--c) 18%, #07060d); border-color: var(--c); color: var(--c);
  }
  .pcard-ribbon { background: var(--c); color: #07060d; }
  .pcard.prog .prog-track { color: #07060d; }
}

@scope (html[data-skin="parchment"], .skin-face[data-skin="parchment"]) to (.skin-face) {
  .pcard {
    background: linear-gradient(165deg, #f6ead0, #e6d3a6 72%);
    color: #2e1e12; border: 1px solid #4a3220; border-radius: 2px;
    box-shadow: 1px 2px 0 rgba(74, 50, 32, 0.28);
  }
  .pcard-art { filter: sepia(0.4) saturate(0.8); }
  .pcard-name, .pcard-corner, .pcard-ribbon, .pcard.prog .prog-track {
    font-family: Georgia, "Times New Roman", serif;
  }
  .pcard-name { text-transform: none; letter-spacing: 0; }
  .pcard.commodity {
    background: linear-gradient(165deg, color-mix(in srgb, var(--c) 40%, #f6ead0), color-mix(in srgb, var(--c) 16%, #e6d3a6));
    border-color: color-mix(in srgb, var(--c) 42%, #4a3220);
  }
  .pcard-ribbon { background: #4a3220; color: #f6ead0; }
}

@scope (html[data-skin="pixel"], .skin-face[data-skin="pixel"]) to (.skin-face) {
  .pcard {
    background: color-mix(in srgb, var(--c) 50%, #fffbe8);
    border: 3px solid #101018; border-radius: 0;
    box-shadow: 4px 4px 0 #101018; color: #101018;
  }
  .pcard-art { filter: contrast(1.3) saturate(1.2); image-rendering: pixelated; }
  .pcard-name, .pcard-corner, .pcard-ribbon {
    font-family: ui-monospace, "Courier New", monospace; font-weight: 900;
  }
  .pcard.prog .prog-track { border-radius: 0; font-family: ui-monospace, "Courier New", monospace; }
  .pcard.commodity {
    background: color-mix(in srgb, var(--c) 64%, #fffbe8); color: #101018;
    border-color: color-mix(in srgb, var(--c) 40%, #101018);
  }
  .pcard-ribbon { background: #101018; color: #fffbe8; border-radius: 0; }
}

@scope (html[data-skin="lowpoly"], .skin-face[data-skin="lowpoly"]) to (.skin-face) {
  .pcard {
    background:
      linear-gradient(128deg, color-mix(in srgb, var(--c) 78%, #fff) 0 46%,
                             color-mix(in srgb, var(--c) 40%, #e7eef6) 46% 72%,
                             #f7f3ea 72%);
    color: #23262e; border: 1px solid #2a2f3a; border-radius: 2px; box-shadow: none;
  }
  .pcard-name { font-weight: 800; letter-spacing: 0.02em; }
  .pcard.commodity {
    background:
      linear-gradient(128deg, color-mix(in srgb, var(--c) 82%, #fff) 0 46%,
                             color-mix(in srgb, var(--c) 46%, #f7f3ea) 46%);
    border-color: color-mix(in srgb, var(--c) 48%, #2a2f3a);
  }
}

@scope (html[data-skin="mario"], .skin-face[data-skin="mario"]) to (.skin-face) {
  .pcard {
    background: color-mix(in srgb, var(--c) 70%, #fff);
    border: 3px solid #1a120c; border-radius: 6px;
    box-shadow: 3px 3px 0 #1a120c; color: #1a120c;
  }
  .pcard-name, .pcard-corner { font-weight: 900; }
  .pcard-ribbon { background: #1a120c; color: #fff; }
}

@scope (html[data-skin="zelda"], .skin-face[data-skin="zelda"]) to (.skin-face) {
  .pcard {
    background: linear-gradient(165deg, #f6ecd0, #e4d2a4);
    color: #24180c; border: 2px solid #3a6a30; border-radius: 2px;
  }
  .pcard-name, .pcard-corner, .pcard-ribbon { font-family: Georgia, "Times New Roman", serif; }
  .pcard-ribbon { background: #1e4a28; color: #f4e6c0; }
}

@scope (html[data-skin="bebop"], .skin-face[data-skin="bebop"]) to (.skin-face) {
  .pcard {
    background: #14161e; color: #f4efe4;
    border: 1px solid #e6c15a; border-radius: 2px;
  }
  .pcard-name, .pcard-corner { letter-spacing: 0.06em; }
  .pcard-ribbon { background: #c45a40; color: #f4efe4; }
  .pcard-art { filter: sepia(0.25) contrast(1.05); }
}