/* Land of Lor — shared element-card styles (used by index.html AND card-editor.html).
   Claude Design "Interface Pass" treatment (game/design/HANDOFF.md + the two .dc.html
   references — copied literally where possible). Class names follow the handoff map. */

/* Self-hosted fonts (handoff: no external requests, ever). */
@font-face {
  font-family: 'Pixelify Sans';
  src: url('assets/fonts/pixelify-sans-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Pixelify Sans';
  src: url('assets/fonts/pixelify-sans-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Pixelify Sans';
  src: url('assets/fonts/pixelify-sans-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Pixelify Sans';
  src: url('assets/fonts/pixelify-sans-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Press Start 2P';
  src: url('assets/fonts/press-start-2p-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --lor-cream: #f6ecd7;
  --lor-card-bg: #fdf6e6;
  --lor-line: #d9c391;
  --lor-ink: #2c2115;
  --lor-ink-soft: #6b5636;
  --lor-gold: #f0b429;
  --lor-gold-outline: #7a4a0e;
  --lor-sky: #8ecdf2;
  --lor-leaf: #2f6b33;
  --lor-leaf-bright: #7cc46a;
  --lor-plum: #2a2135;
  --lor-pink: #d4548c;
  --lor-panel-text: #f2ead8;
  --lor-gold-label: #f5d98a;
  --lor-cinnabar: #a62b1f; /* hexagram lines only */
  --lor-heading: 'Pixelify Sans', system-ui, sans-serif;
  --lor-tiny: 'Press Start 2P', 'Pixelify Sans', monospace;
}

@keyframes lorFoil {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ---- the full element card (300×432 incl. rarity frame) ---- */
.element-card {
  width: 300px;
  box-sizing: border-box;
  position: relative;
}
.element-card.rarity-common {
  padding: 5px; border-radius: 18px;
  background: linear-gradient(180deg, #8a5a1c, #7a4a0e);
  box-shadow: 0 8px 18px rgba(44, 33, 21, 0.35);
}
.element-card.rarity-rare {
  padding: 7px; border-radius: 20px;
  background: linear-gradient(180deg, #f4c95a, #c98f1e);
  box-shadow: 0 0 18px rgba(240, 180, 41, 0.55), 0 8px 20px rgba(44, 33, 21, 0.35);
}
.element-card.rarity-legendary {
  padding: 10px; border-radius: 22px;
  background: linear-gradient(110deg, #f0b429, #fff0bd, #f0b429, #e08b2a, #f0b429);
  background-size: 200% 100%;
  animation: lorFoil 5s linear infinite;
  box-shadow: 0 0 34px rgba(240, 180, 41, 0.75), 0 10px 24px rgba(44, 33, 21, 0.4);
  outline: 3px solid #7a4a0e; outline-offset: -3px;
}
.element-card.uncollected { filter: saturate(0.15); }

.card-body {
  position: relative;
  height: 412px;
  box-sizing: border-box;
  display: flex; flex-direction: column;
  padding: 10px 0 0;
  border-radius: 13px;
  border: 3px solid #7a4a0e;
  overflow: hidden;
  /* background set inline by the renderer: element colour fading to cream at the base */
}

/* corner chip: hexagram figure + King Wen number — always visible */
.card-corner {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  display: flex; align-items: center; gap: 6px;
  padding: 5px 7px;
  background: #fdf6e6;
  border: 2px solid #7a4a0e; border-radius: 7px;
  box-shadow: 0 2px 0 rgba(122, 74, 14, 0.35);
}
.card-hexagram { display: flex; flex-direction: column; gap: 3px; }
.card-hexagram .hexline { display: flex; gap: 4px; width: 26px; height: 4px; }
.card-hexagram .hexline span { height: 4px; background: var(--lor-cinnabar); display: block; }
.card-hexagram .hexline.solid span { width: 100%; }
.card-hexagram .hexline.broken span { width: 40%; }
.card-hexagram .hexline.broken span + span { margin-left: auto; }
.card-number {
  font-family: var(--lor-tiny);
  font-size: 11px; color: #7a4a0e;
}

/* rarity badge, top-right */
.card-rarity {
  position: absolute; right: 10px; top: 10px; z-index: 2;
  padding: 4px 8px; border-radius: 6px;
  font-family: var(--lor-heading);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(253, 246, 230, 0.9); color: #6b5636; border: 1px solid #7a4a0e;
}
.rarity-rare > .card-body > .card-rarity { background: #fdf6e6; color: #7a4a0e; border: 2px solid #f0b429; }
.rarity-legendary > .card-body > .card-rarity { background: #7a4a0e; color: #f5d98a; border: 2px solid #f0b429; }

/* art panel — dashed placeholder until real art exists */
.card-art-panel {
  position: relative;
  margin: 52px 12px 0; height: 168px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(253, 246, 230, 0.55);
  border: 2px dashed rgba(122, 74, 14, 0.55);
  overflow: hidden;
}
.card-art-panel img { width: 100%; height: 100%; object-fit: contain; }
.card-art-glyph { font-family: var(--lor-heading); font-size: 14px; color: #6b5636; }
.uncollected .card-art-glyph { font-size: 76px; }
.card-art-tag {
  position: absolute; bottom: 6px; right: 8px;
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(107, 86, 54, 0.75);
}

/* trigram pair pill */
.card-trigrams {
  margin: 10px 14px 0; align-self: center;
  padding: 4px 12px;
  background: rgba(253, 246, 230, 0.9);
  border: 1px solid #7a4a0e; border-radius: 999px;
  font-size: 11px; letter-spacing: 0.06em; color: #6b5636; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80%;
  font-family: system-ui, sans-serif;
}

/* name bar */
.card-name-bar {
  margin: 8px 12px 0;
  padding: 8px 10px;
  background: #fdf6e6;
  border: 3px solid #7a4a0e; border-radius: 10px;
  text-align: center;
  font-family: var(--lor-heading);
  font-size: 27px; line-height: 1.05; color: #2c2115;
  text-wrap: balance;
}

/* lower text box — where it comes from + what you need to collect/hold it */
.card-text {
  margin: 8px 12px 12px;
  padding: 9px 11px;
  background: rgba(253, 246, 230, 0.94);
  border: 2px solid #d9c391; border-radius: 9px;
  font-size: 12.5px; line-height: 1.4; color: #2c2115;
  flex: 1;
  overflow-y: auto;
  font-family: system-ui, sans-serif;
}

/* ---- grid tile (the smallest readable unit) ---- */
.card-tile {
  position: relative;
  width: 100%; max-width: 62px;
  height: 58px;
  padding: 0; margin: 0;
  border-radius: 8px; overflow: hidden;
  cursor: pointer;
  display: flex; flex-direction: column;
  border: 2px solid #7a4a0e;
  font: inherit;
  /* background set inline: element colour (or grey when uncollected) */
}
.card-tile.rarity-rare { border-color: #d9c391; }
.card-tile.rarity-legendary { border-color: #f0b429; box-shadow: 0 0 8px rgba(240, 180, 41, 0.75); }
.card-tile.uncollected { filter: saturate(0); opacity: 0.75; }
.card-tile:active { transform: scale(0.96); }
.card-tile .card-art {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--lor-heading);
  font-size: 19px; color: #6b5636;
  background: rgba(253, 246, 230, 0.4);
  overflow: hidden;
}
.card-tile .card-art img { width: 100%; height: 100%; object-fit: cover; }
.card-tile .card-name {
  flex: none;
  padding: 2px 3px;
  background: rgba(253, 246, 230, 0.94);
  border-top: 1px solid #7a4a0e;
  font-size: 8.5px; line-height: 1.2; color: #2c2115;
  text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: system-ui, sans-serif;
}

/* ---- the 8×8 grid — always 8 across, centred, scrolls vertically ---- */
.ingredient-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 62px));
  gap: 7px;
  align-content: start;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}