/* Floralia · which deck cards combo with which (2026-10-19, the user: "จะรู้ได้ไงว่าการ์ดใบไหนคอมโบกับใบไหนในช่องนี้"). Styles
   js/cards.js saiTag / cmbMark / linksHtml: a solid colour tag per สาย (its own plate + text colour, so it reads the same on every
   book skin, light or dark), the combos' numbered marks under the deck cards, the chip row and the next step on the dark altar,
   the book grid's and the picker's tags and +คอมโบ marks. Loaded after cardbook_fx.css / bookcontrast.css. */

/* the สาย tag (also inside the line pop-up, which sits outside the book) */
html:root .cd-stag { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; max-width: 100%; padding: 2px 7px 3px; border-radius: 999px;
  background: var(--sc); color: var(--sf) !important; -webkit-text-fill-color: var(--sf) !important; text-shadow: none !important;
  font: 700 10.5px/1.15 Mali, sans-serif; font-style: normal; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: help;
  box-shadow: 0 0 0 1px rgba(10, 6, 2, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); vertical-align: middle; }
html:root .cd-stag:hover { filter: brightness(1.12); }
html:root .cd-lpop .cd-stag { font-size: 12px; padding: 2px 9px 3px; margin-right: 2px; }

/* a combo's mark: its number on its สาย colours (a mix = its สายs side by side), the kind combos in gold */
html:root .cd-cmk { display: inline-grid; place-items: center; flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%;
  font: 800 10.5px/1 Fredoka, Mali, sans-serif; color: #fff !important; -webkit-text-fill-color: #fff !important;
  text-shadow: 1px 0 0 rgba(10, 6, 2, 0.85), -1px 0 0 rgba(10, 6, 2, 0.85), 0 1px 0 rgba(10, 6, 2, 0.85), 0 -1px 0 rgba(10, 6, 2, 0.85) !important;
  box-shadow: 0 0 0 1px rgba(10, 6, 2, 0.7), 0 0 0 2.2px rgba(255, 243, 200, 0.75); }
html:root .cd-cmk.gold { color: #3a2206 !important; -webkit-text-fill-color: #3a2206 !important; text-shadow: none !important; }

/* under each deck card: the tag + the marks of the combos it is in */
html:root #ui .bookwin .cd-deck .cd-sline { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px 4px; max-width: 100%; min-height: 19px; }
html:root #ui .bookwin .cd-deck .cd-cmks { display: inline-flex; gap: 3px; }
html:root #ui .bookwin .cd-deck .cd-slot .cd-stag { box-shadow: 0 0 0 1px rgba(10, 6, 2, 0.7), 0 0 0 2px rgba(255, 243, 200, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3); }

/* a chip picked: its cards lit, the rest dimmed */
html:root #ui .bookwin .cd-deck .cd-slot { transition: opacity 0.18s, filter 0.18s, transform 0.18s; }
html:root #ui .bookwin .cd-deck.cmb-on .cd-slot.dim { opacity: 0.3; filter: grayscale(0.75); }
html:root #ui .bookwin .cd-deck.cmb-on .cd-slot.hl { transform: translateY(-3px); }
html:root #ui .bookwin .cd-deck.cmb-on .cd-slot.hl .cd { outline: 3px solid #ffe27a; outline-offset: 2px; border-radius: 8px; filter: drop-shadow(0 0 9px rgba(255, 226, 122, 0.75)); }
html:root #ui .bookwin .cd-deck.cmb-on .cd-slot.hl .cd-cmk { transform: scale(1.15); }

/* the row under the slots, on the altar (dark on every skin) */
html:root #ui .bookwin .cd-deck .cd-links { grid-column: 1 / -1; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 7px; margin-top: 2px; padding-top: 9px;
  border-top: 1px solid rgba(246, 210, 122, 0.28); text-align: left; }
html:root #ui .bookwin .cd-deck .cd-lchips { display: flex; flex-wrap: wrap; gap: 6px; }
html:root #ui .bookwin .cd-deck .cd-lchip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 11px 3px 3px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(246, 210, 122, 0.5); transition: background 0.15s, box-shadow 0.15s, transform 0.12s; }
html:root #ui .bookwin .cd-deck .cd-lchip:hover { background: rgba(255, 226, 122, 0.14); transform: translateY(-1px); }
html:root #ui .bookwin .cd-deck .cd-lchip.on { background: rgba(255, 226, 122, 0.24); box-shadow: inset 0 0 0 2px #ffe27a, 0 0 10px rgba(255, 226, 122, 0.35); }
html:root #ui .bookwin .cd-deck .cd-lchip > span { font: 700 12.5px/1.2 Mali, sans-serif; color: #fff3d0 !important; -webkit-text-fill-color: #fff3d0 !important; text-shadow: none !important; white-space: nowrap; }
html:root #ui .bookwin .cd-deck .cd-lchip > small { font: 600 11.5px/1.2 Mali, sans-serif; color: #a8eea0 !important; -webkit-text-fill-color: #a8eea0 !important; text-shadow: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:root #ui .bookwin .cd-deck :is(.cd-lwho, .cd-lnext, .cd-lnone) { margin: 0; font: 500 12.5px/1.5 Mali, sans-serif; color: #efe6cc !important; -webkit-text-fill-color: #efe6cc !important; text-shadow: none !important; }
html:root #ui .bookwin .cd-deck .cd-lwho { display: flex; align-items: flex-start; gap: 7px; padding: 5px 9px; border-radius: 9px; background: rgba(255, 226, 122, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 226, 122, 0.35); }
html:root #ui .bookwin .cd-deck .cd-lwho .cd-cmk { margin-top: 2px; }
html:root #ui .bookwin .cd-deck .cd-lwho .cd-ln { color: #a8eea0 !important; -webkit-text-fill-color: #a8eea0 !important; font-weight: 700; }
html:root #ui .bookwin .cd-deck .cd-lnext { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
html:root #ui .bookwin .cd-deck .cd-lnext > span { min-width: 0; }
html:root #ui .bookwin .cd-deck .cd-lnext b { color: #a8eea0 !important; -webkit-text-fill-color: #a8eea0 !important; }
html:root #ui .bookwin .cd-deck .cd-lnext small { color: #cfc6ad !important; -webkit-text-fill-color: #cfc6ad !important; font-size: 11.5px; }
html:root #ui .bookwin .cd-deck .cd-lnext .btn { flex: 0 0 auto; }
html:root #ui .bookwin .cd-deck .cd-lnone { color: #cfc6ad !important; -webkit-text-fill-color: #cfc6ad !important; }

/* the book grid: the tag on each card's foot, +คอมโบ on a card that would make one */
html:root #ui .bookwin .cd-cell > .cd-stag { position: absolute; z-index: 4; left: 50%; bottom: -8px; transform: translateX(-50%); max-width: 92%; }
html:root #ui .bookwin .cd-cell > .cd-stag:hover { transform: translateX(-50%) scale(1.06); }
html:root #ui .bookwin .cd-grid { row-gap: 16px; }
html:root .cd-cbadge, html:root .cd-pcmb { display: inline-flex; align-items: center; padding: 2px 7px 3px; border-radius: 999px; background: #1d8f45; color: #fff !important; -webkit-text-fill-color: #fff !important;
  text-shadow: none !important; font: 800 10.5px/1.15 Mali, sans-serif; font-style: normal; white-space: nowrap; box-shadow: 0 0 0 1.5px #0b3a1a, 0 2px 4px rgba(0, 0, 0, 0.35); }
html:root #ui .bookwin .cd-cell > .cd-cbadge { position: absolute; z-index: 5; left: -5px; top: -7px; animation: cdCmbPulse 1.6s ease-in-out infinite; }
@keyframes cdCmbPulse { 50% { box-shadow: 0 0 0 1.5px #0b3a1a, 0 0 10px 2px rgba(120, 240, 130, 0.75); } }

/* the slot picker: the tag (and what the card completes) between its name and its lines */
html:root #ui .bookwin .cd-pinfo .cd-ptags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 1px 0; }
html:root #ui .bookwin .cd-prow:has(.cd-pcmb) { box-shadow: inset 0 0 0 1.5px rgba(40, 170, 80, 0.75); }

@media (prefers-reduced-motion: reduce) {
  html:root #ui .bookwin .cd-cell > .cd-cbadge { animation: none; }
}

/* (the deck's stat list under "สำรับให้พลังตอนนี้" had light text on the light skins' paper: dark ink + a deep green value there) */
html:root[data-booklight] #ui .bookwin .cd-statg li, html:root[data-booklight] #ui .bookwin .cd-statg li .cd-ln { color: var(--bk-ink) !important; -webkit-text-fill-color: var(--bk-ink) !important; text-shadow: none !important; }
html:root[data-booklight] #ui .bookwin .cd-statg li b { color: #1d7a33 !important; -webkit-text-fill-color: #1d7a33 !important; text-shadow: none !important; }