/* Floralia · the card book's deck as a treasure altar (2026-10-12, the user: "แก้หน้าการ์ดให้โดดเด่น มีวีเอฟเฟค สมกับเป็นของ
   หายากและสำคัญ · โดยเฉพาะตรงนี้ทำให้รู้สึกว่าอยากหามาใส่ให้ได้"). Existing pictures only: the card back
   (assets/ui_cards/card_back.png) in every empty / locked socket, the gold boss card's glint / sheen / star-dust light
   (assets/ui_cards/gold, black = nothing: screen blend over the dark altar). It styles js/cards.js's own markup (deckHtml,
   the detail card), nothing changed there. Strong selectors + !important where the book skins (bookcontrast.css) force colours. */

/* the altar: a deep night strip, gold rim, drifting star dust, a slow band of light */
html:root #ui .bookwin .cd-deck { position: relative; isolation: isolate; overflow: hidden; gap: 10px; padding: 16px 14px 12px; margin: 2px 0 12px; border-radius: 14px;
  background: url(../assets/ui_cards/gold/dust.jpg) 0 0 / 340px auto, radial-gradient(120% 140% at 50% 0%, #2c2156 0%, #161230 55%, #0b0a18 100%);
  background-blend-mode: screen, normal;
  box-shadow: inset 0 0 0 2px #c99a3c, inset 0 0 0 4px rgba(20, 12, 4, 0.75), inset 0 0 0 5px rgba(246, 210, 122, 0.45), inset 0 0 36px rgba(130, 90, 230, 0.35), 0 6px 18px rgba(20, 12, 30, 0.45);
  animation: cbDust 48s linear infinite; }
@keyframes cbDust { to { background-position: 340px -340px, 0 0; } }
html:root #ui .bookwin .cd-deck::before { content: ''; position: absolute; inset: -30% 0; z-index: 0; pointer-events: none;
  background: url(../assets/ui_cards/gold/sheen.jpg) center / 34% 100% no-repeat; mix-blend-mode: screen; opacity: 0.28; animation: cbBand 8s ease-in-out infinite; }
@keyframes cbBand { 0% { transform: translateX(-75%); } 55%, 100% { transform: translateX(75%); } }
html:root #ui .bookwin .cd-deck .cd-slot { z-index: 1; gap: 7px; }

/* every socket holds the card back: a card is waiting there */
html:root #ui .bookwin .cd-deck .cd-slot-e { position: relative; justify-content: flex-end; padding-bottom: 11%; border-radius: 7%; overflow: visible; color: #fff3c4;
  background: url(../assets/ui_cards/card_back.png) center / 100% 100% no-repeat !important; box-shadow: none !important; transition: transform 0.15s, filter 0.15s; }
/* the glint running over it, the motes rising out of it */
html:root #ui .bookwin .cd-deck .cd-slot-e::before { content: ''; position: absolute; inset: 3%; border-radius: 6%; pointer-events: none; z-index: 1;
  background: url(../assets/ui_cards/gold/glint.jpg) no-repeat; background-size: 260% 260%; mix-blend-mode: screen; animation: cbGlint 3.4s ease-in-out infinite; }
@keyframes cbGlint { 0% { background-position: 120% 120%; opacity: 0; } 12% { opacity: 1; } 55% { background-position: -20% -20%; opacity: 1; } 62%, 100% { background-position: -20% -20%; opacity: 0; } }
html:root #ui .bookwin .cd-deck .cd-slot-e::after { content: ''; position: absolute; left: -10%; right: -10%; top: -26%; bottom: 20%; pointer-events: none; z-index: 1;
  background: url(../assets/ui_cards/gold/dust.jpg) 0 0 / 180% auto; mix-blend-mode: screen; opacity: 0.9;
  -webkit-mask-image: radial-gradient(60% 55% at 50% 60%, #000 30%, transparent 75%); mask-image: radial-gradient(60% 55% at 50% 60%, #000 30%, transparent 75%);
  animation: cbRise 5s linear infinite; }
@keyframes cbRise { to { background-position: 0 -260px; } }

/* an open empty socket: it breathes gold, a glowing + over the book, "ใส่การ์ด" */
html:root #ui .bookwin .cd-deck .cd-slot:not(.lock):not(.full) .cd-slot-e { animation: cbCall 1.8s ease-in-out infinite; }
@keyframes cbCall { 0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 205, 90, 0.55)) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6)); }
  50% { filter: drop-shadow(0 0 9px rgba(255, 215, 110, 0.95)) drop-shadow(0 0 18px rgba(255, 160, 60, 0.55)) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6)); } }
html:root #ui .bookwin .cd-deck .cd-slot:not(.lock):not(.full) .cd-slot-e b { position: absolute; z-index: 2; left: 50%; top: 46%; width: 50%; aspect-ratio: 1; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%; font: 800 38px/1 Fredoka, sans-serif;
  color: #fff8dc !important; -webkit-text-fill-color: #fff8dc !important; opacity: 1 !important; text-shadow: 0 0 5px #ffd25a, 0 0 12px #ff9a2a, 0 1px 2px #5a2a00 !important;
  background: radial-gradient(closest-side, rgba(255, 228, 140, 0.85), rgba(255, 170, 60, 0.35) 62%, rgba(255, 170, 60, 0)); animation: cbPlus 1.8s ease-in-out infinite; }
@keyframes cbPlus { 50% { transform: translate(-50%, -50%) scale(1.14); } }
html:root #ui .bookwin .cd-deck .cd-slot-e small { position: relative; z-index: 2; padding: 3px 9px; border-radius: 999px; white-space: nowrap; opacity: 1 !important; }
html:root #ui .bookwin .cd-deck .cd-slot:not(.lock):not(.full) .cd-slot-e small { font-size: 0 !important; background: linear-gradient(#fff0b8, #e3a83e);
  box-shadow: 0 0 0 1px #7a4a12, 0 0 10px rgba(255, 200, 90, 0.75); }
html:root #ui .bookwin .cd-deck .cd-slot:not(.lock):not(.full) .cd-slot-e small::after { content: 'ใส่การ์ด'; font: 800 11px/1 Mali, sans-serif; color: #3a2006; -webkit-text-fill-color: #3a2006; }
html:root #ui .bookwin .cd-deck .cd-slot:not(.lock):not(.full):hover .cd-slot-e { transform: translateY(-4px) scale(1.04); }

/* a locked socket: the same card back, grey and dark, a lock, "ปลดที่ Lv N" - and now and then a faint glint (it will open) */
html:root #ui .bookwin .cd-deck .cd-slot.lock .cd-slot-e { opacity: 1 !important; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6));
  background: linear-gradient(rgba(10, 9, 20, 0.55), rgba(10, 9, 20, 0.55)), linear-gradient(#808080, #808080), url(../assets/ui_cards/card_back.png) center / 100% 100% no-repeat !important;
  background-blend-mode: normal, color, normal !important; }
html:root #ui .bookwin .cd-deck .cd-slot.lock .cd-slot-e::before { opacity: 0.35; animation-duration: 6.5s; }
html:root #ui .bookwin .cd-deck .cd-slot.lock .cd-slot-e::after { display: none; }
html:root #ui .bookwin .cd-deck .cd-slot.lock .cd-slot-e b { position: absolute; z-index: 2; left: 50%; top: 44%; transform: translate(-50%, -50%); font-size: 24px; filter: grayscale(0.3) drop-shadow(0 2px 3px #000); opacity: 1 !important; }
html:root #ui .bookwin .cd-deck .cd-slot.lock .cd-slot-e small { font: 700 10.5px/1 Mali, sans-serif; color: #e9e4f2 !important; -webkit-text-fill-color: #e9e4f2 !important;
  background: rgba(16, 14, 30, 0.85); box-shadow: 0 0 0 1px rgba(200, 190, 230, 0.45); }
html:root #ui .bookwin .cd-deck .cd-slot.lock .cd-slot-e small::before { content: 'ปลดที่ '; }

/* the socket picked (choosing its card) */
html:root #ui .bookwin .cd-deck .cd-slot.sel .cd-slot-e, html:root #ui .bookwin .cd-deck .cd-slot.sel .cd { outline: 2.5px solid #ffd76a; outline-offset: 3px; }

/* a socket with its card: a soft halo and turning rays of its grade's colour behind it */
html:root #ui .bookwin .cd-deck .cd-slot.full::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 40%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 214, 120, 0.38) 0deg 7deg, rgba(255, 214, 120, 0) 7deg 22deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent 72%); mask-image: radial-gradient(closest-side, #000 25%, transparent 72%); animation: cbSpin 14s linear infinite; }
@keyframes cbSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
html:root #ui .bookwin .cd-deck .cd-slot.full .cd { filter: drop-shadow(0 0 6px rgba(255, 215, 110, 0.8)) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6)); }

/* the socket's name under it: a small gold-lettered plaque */
html:root #ui .bookwin .cd-deck .cd-slot-l { padding: 2px 8px; border-radius: 6px; font: 700 10.5px/1.15 Mali, sans-serif; color: #f6dc98 !important; -webkit-text-fill-color: #f6dc98 !important;
  background: rgba(10, 8, 22, 0.7); box-shadow: 0 0 0 1px rgba(201, 154, 60, 0.6); }
html:root #ui .bookwin .cd-deck .cd-slot.lock .cd-slot-l { color: #b9b2c8 !important; -webkit-text-fill-color: #b9b2c8 !important; box-shadow: 0 0 0 1px rgba(160, 150, 190, 0.35); }

/* the big card on the card page: a light wheel and a halo behind an owned one */
html:root #ui .bookwin .cd-dcard { position: relative; isolation: isolate; }
html:root #ui .bookwin .cd-dcard:has(.cd:not(.locked))::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: 170%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 220, 130, 0.42) 0deg 6deg, rgba(255, 220, 130, 0) 6deg 18deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 22%, transparent 70%); mask-image: radial-gradient(closest-side, #000 22%, transparent 70%); animation: cbSpin 20s linear infinite; }
html:root #ui .bookwin .cd-dcard:has(.cd:not(.locked)) .cd { filter: drop-shadow(0 0 10px rgba(255, 215, 110, 0.75)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55)); }

@media (prefers-reduced-motion: reduce) {
  html:root #ui .bookwin .cd-deck, html:root #ui .bookwin .cd-deck::before, html:root #ui .bookwin .cd-deck .cd-slot-e, html:root #ui .bookwin .cd-deck .cd-slot-e::before,
  html:root #ui .bookwin .cd-deck .cd-slot-e::after, html:root #ui .bookwin .cd-deck .cd-slot-e b, html:root #ui .bookwin .cd-deck .cd-slot.full::before,
  html:root #ui .bookwin .cd-dcard::before { animation: none !important; }
}

/* the player's lock on a deck card (2026-10-18, js/cards.js C.isLocked): a round 🔓 / 🔒 toggle on the slot's top-left corner;
   a locked slot gets a gold chain rim and a solid gold badge so it reads at a glance */
html:root #ui .bookwin .cd-deck .cd-lockbtn { position: absolute; z-index: 5; left: -5px; top: -7px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  font: 400 13px/1 sans-serif; cursor: pointer; background: rgba(14, 10, 28, 0.88); box-shadow: 0 0 0 1.5px rgba(201, 154, 60, 0.75), 0 2px 4px rgba(0, 0, 0, 0.6);
  opacity: 0.72; transition: transform 0.12s, opacity 0.12s; }
html:root #ui .bookwin .cd-deck .cd-slot:hover .cd-lockbtn, html:root #ui .bookwin .cd-deck .cd-lockbtn:focus-visible { opacity: 1; }
html:root #ui .bookwin .cd-deck .cd-lockbtn:hover { transform: scale(1.14); }
html:root #ui .bookwin .cd-deck .cd-lockbtn.on { opacity: 1; width: 30px; height: 30px; left: -7px; top: -9px; font-size: 15px;
  background: linear-gradient(#fff1b8, #e0a92a 60%, #a8701a); box-shadow: 0 0 0 2px #3a2206, 0 0 0 3.5px #f6d27a, 0 3px 6px rgba(0, 0, 0, 0.7); }
html:root #ui .bookwin .cd-deck .cd-slot.held .cd { outline: 2.5px solid #f2c14e; outline-offset: 2px; border-radius: 8px; }
html:root #ui .bookwin .cd-deck .cd-slot.held .cd-slot-l { color: #ffe9a8 !important; -webkit-text-fill-color: #ffe9a8 !important; box-shadow: 0 0 0 1.5px #f2c14e; background: rgba(70, 44, 6, 0.85); }
html:root #ui .bookwin .cd-deck .cd-slot.held:hover .cd { transform: none; }
/* the card page: the lock button and its note */
html:root #ui .bookwin .cd-acts .cd-lockbig.on { box-shadow: inset 0 0 0 1.5px #f2c14e; }
html:root #ui .bookwin .cd-acts .cd-locknote { flex: 1 1 100%; font: 600 11.5px/1.4 Mali, sans-serif; color: #ffd98a; }
html:root #ui .bookwin .cd-acts button[disabled], html:root #ui .bookwin .cd-repl button[disabled], html:root #ui .bookwin .cd-pick button[disabled] { opacity: 0.55; cursor: not-allowed; }
html:root[data-booklight] #ui .bookwin .cd-acts .cd-locknote { color: var(--bk-ink) !important; -webkit-text-fill-color: var(--bk-ink) !important; }