/* Floralia — the dungeon tier cards (2026-10-17; js/dgcards.js): the boss / party dungeon window (#bdg, a row of tall cards)
   and the daily dungeon page (wide rows). Every picture is the game's Codex art (banners cut by tools/make_dg_banners.py,
   the metal frames assets/ui_book/metal/frame34_g*, flames assets/fx/flame_0.png, the boss's own sheet); CSS only lays them
   out, tints the flames to the tier, and adds the glow. The card carries its own dark plate and light text, so it reads on
   every book skin. */
.dgc-row { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 8px; width: 100%; height: 100%; }
.dgc-row.wide { grid-template-columns: minmax(0, 1fr); height: auto; gap: 9px; margin: 8px 0 6px; }
.dgc { position: relative; min-width: 0; border-radius: 12px; cursor: pointer; isolation: isolate; outline: none;
  font-family: var(--thai, Mali, sans-serif); color: #f6eedb; text-align: left;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45); transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; }
.dgc:hover { transform: translateY(-2px); }
.dgc:focus-visible { box-shadow: 0 0 0 3px #fff3c4, 0 4px 10px rgba(0, 0, 0, 0.45); }
/* the scene and its shade (dark at the bottom under the text) */
.dgc .dgc-bn { position: absolute; inset: 6px; border-radius: 7px; background: var(--bn) var(--bp) / cover no-repeat; z-index: 0; transition: filter 0.2s; }
/* (a tall card: the boss's face up in the clear part above the text; the picture's foot hides under the dark plate) */
.dgc:not(.wide) .dgc-bn { background-position: 50% -30px; background-color: #0e0b16; }
.dgc .dgc-shade { position: absolute; inset: 6px; border-radius: 7px; z-index: 1;
  background: linear-gradient(180deg, rgba(8, 6, 16, 0.6) 0%, rgba(8, 6, 16, 0.08) 22%, rgba(8, 6, 16, 0.12) 38%, rgba(8, 6, 16, 0.82) 58%, rgba(8, 6, 16, 0.95) 100%),
              radial-gradient(120% 70% at 50% 100%, color-mix(in srgb, var(--tc) 30%, transparent), transparent 70%); }
.dgc.wide .dgc-shade { background: linear-gradient(90deg, rgba(8, 6, 16, 0.96) 0%, rgba(8, 6, 16, 0.88) 42%, rgba(8, 6, 16, 0.35) 70%, rgba(8, 6, 16, 0.2) 100%),
  radial-gradient(70% 140% at 0% 50%, color-mix(in srgb, var(--tc) 32%, transparent), transparent 70%); }
/* the tier's polished metal frame: corners kept, sides stretched */
.dgc .dgc-fr { position: absolute; inset: 0; z-index: 6; pointer-events: none; border: 13px solid transparent; border-radius: 12px;
  border-image: var(--fr) 46 / 13px / 0 stretch; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
.dgc.wide .dgc-fr { border-width: 11px; border-image-width: 11px; }
/* the difficulty: flames in the tier's colour (a skull from Hell up), the first-clear badge or the tick */
.dgc .dgc-top { position: absolute; left: 12px; right: 12px; top: 10px; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.dgc:not(.wide) .dgc-top { flex-direction: column; align-items: flex-start; gap: 3px; }
.dgc .dgc-marks { display: flex; align-items: flex-end; gap: 0; min-width: 0; }
.dgc .dgc-fl { width: 15px; height: 19px; object-fit: contain; margin-right: -3px; filter: drop-shadow(0 0 3px var(--tc)) drop-shadow(0 1px 1px #000); animation: dgcFlick 1.6s ease-in-out infinite; }
.dgc .dgc-fl:nth-child(2n) { animation-delay: 0.4s; } .dgc .dgc-fl:nth-child(3n) { animation-delay: 0.8s; }
.dgc.fam-green .dgc-fl { filter: hue-rotate(75deg) saturate(1.2) drop-shadow(0 0 3px var(--tc)) drop-shadow(0 1px 1px #000); }
.dgc.fam-blue .dgc-fl { filter: hue-rotate(185deg) saturate(1.2) drop-shadow(0 0 3px var(--tc)) drop-shadow(0 1px 1px #000); }
.dgc.fam-purple .dgc-fl { filter: hue-rotate(235deg) saturate(1.2) drop-shadow(0 0 3px var(--tc)) drop-shadow(0 1px 1px #000); }
.dgc.fam-red .dgc-fl { filter: hue-rotate(-18deg) saturate(1.5) drop-shadow(0 0 4px var(--tc)) drop-shadow(0 1px 1px #000); }
.dgc.fam-gold .dgc-fl { filter: hue-rotate(12deg) saturate(1.3) brightness(1.1) drop-shadow(0 0 4px #ffd24a) drop-shadow(0 1px 1px #000); }
.dgc .dgc-sk { width: 22px; height: 22px; object-fit: contain; margin-right: 2px; filter: drop-shadow(0 0 4px var(--tc)) drop-shadow(0 1px 1px #000); }
@keyframes dgcFlick { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.08, 1.14) translateY(-1px); } }
.dgc .dgc-badge { flex: none; font: 800 0.62rem/1 var(--thai, Mali, sans-serif); font-style: normal; padding: 3px 6px 2px; border-radius: 7px; white-space: nowrap; }
.dgc .dgc-badge.first { color: #3a2400; background: linear-gradient(180deg, #fff1a8, #f2b43a); box-shadow: 0 0 6px rgba(255, 210, 74, 0.7); }
.dgc .dgc-badge.done { color: #0d3b12; background: linear-gradient(180deg, #c8ffb8, #5fd06a); font-size: 0.8rem; padding: 2px 6px; }
/* the text over the shade */
.dgc .dgc-body { position: absolute; left: 15px; right: 14px; bottom: 12px; z-index: 4; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dgc .dgc-head { display: flex; flex-direction: column; min-width: 0; }
.dgc .dgc-tier { font: 800 1.28rem/1.05 var(--thai, Mali, sans-serif); color: var(--tc); -webkit-text-fill-color: var(--tc); white-space: nowrap;
  text-shadow: 0 2px 0 #12101c, 1px 0 0 #12101c, -1px 0 0 #12101c, 0 -1px 0 #12101c; }
.dgc .dgc-name { font: 700 0.72rem/1.2 var(--thai, Mali, sans-serif); color: #f4ead2; -webkit-text-fill-color: #f4ead2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dgc:not(.wide) .dgc-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 0.66rem; line-height: 1.15; }
.dgc .dgc-nums { display: flex; flex-direction: column; gap: 1px; }
.dgc .dgc-req { font: 700 0.64rem/1.25 Fredoka, var(--thai, Mali, sans-serif); color: #ffd98a; -webkit-text-fill-color: #ffd98a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dgc .dgc-you { font: 700 0.62rem/1.25 Fredoka, var(--thai, Mali, sans-serif); white-space: nowrap; }
.dgc .dgc-you.ok { color: #8ff08a; -webkit-text-fill-color: #8ff08a; }
.dgc .dgc-you.bad { color: #ff8a7a; -webkit-text-fill-color: #ff8a7a; }
.dgc .dgc-pips { display: flex; align-items: center; gap: 3px; }
.dgc .dgc-pips i { width: 8px; height: 8px; border-radius: 50%; background: #3a3446; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.dgc .dgc-pips i.on { background: radial-gradient(circle at 35% 35%, #fff, var(--tc) 60%); box-shadow: 0 0 5px var(--tc); }
.dgc .dgc-pips em { font: 700 0.62rem/1 Fredoka, sans-serif; font-style: normal; color: #e8dcc0; -webkit-text-fill-color: #e8dcc0; margin-left: 2px; }
/* its three best rewards (each opens its card) */
.dgc .dgc-rw { display: flex; gap: 4px; margin-top: 3px; }
.dgc .dgc-ri { position: relative; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.18), rgba(10, 8, 18, 0.85)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gc) 75%, transparent), 0 0 6px color-mix(in srgb, var(--gc) 40%, transparent); }
.dgc .dgc-ri:hover { transform: scale(1.12); }
.dgc .dgc-ri img { width: 21px; height: 21px; object-fit: contain; }
.dgc .dgc-ri b { position: absolute; right: -2px; bottom: -3px; font: 700 0.5rem/1 Fredoka, sans-serif; color: #fff; -webkit-text-fill-color: #fff; text-shadow: 0 1px 1px #000, 0 0 2px #000; }
/* the boss's face (wide cards) */
.dgc .dgc-medal { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); z-index: 4; width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--tc) 45%, #1a1424), #0c0a14 75%); box-shadow: 0 0 0 3px #1a1424, 0 0 0 5px var(--tc), 0 0 14px var(--tc); overflow: hidden; }
.dgc .dgc-mob { position: absolute; left: -12%; top: -6%; width: 124%; height: 124%; background-repeat: no-repeat; }
/* picked: lifts and glows */
.dgc.on { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--tc), 0 0 18px color-mix(in srgb, var(--tc) 75%, transparent), 0 8px 16px rgba(0, 0, 0, 0.55); }
.dgc.on .dgc-bn { filter: brightness(1.12) saturate(1.1); }
.dgc:not(.on):not(:hover) .dgc-bn { filter: brightness(0.86) saturate(0.92); }
/* the higher tiers breathe */
.dgc.n3:not(.lock), .dgc.n4:not(.lock), .dgc.n5:not(.lock), .dgc.hot:not(.lock) { animation: dgcBreath 3.2s ease-in-out infinite; }
.dgc.on.n3:not(.lock), .dgc.on.n4:not(.lock), .dgc.on.n5:not(.lock), .dgc.on.hot:not(.lock) { animation: dgcBreathOn 3.2s ease-in-out infinite; }
@keyframes dgcBreath { 0%, 100% { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45), 0 0 0 color-mix(in srgb, var(--tc) 0%, transparent); } 50% { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45), 0 0 14px color-mix(in srgb, var(--tc) 55%, transparent); } }
@keyframes dgcBreathOn { 0%, 100% { box-shadow: 0 0 0 2px var(--tc), 0 0 14px color-mix(in srgb, var(--tc) 60%, transparent), 0 8px 16px rgba(0, 0, 0, 0.55); } 50% { box-shadow: 0 0 0 2px var(--tc), 0 0 26px var(--tc), 0 8px 16px rgba(0, 0, 0, 0.55); } }
/* sparks rising (Hell up): the game's own spark picture */
.dgc .dgc-em { position: absolute; left: var(--x); bottom: 14px; z-index: 3; width: 12px; height: 12px; pointer-events: none; opacity: 0;
  background: url(../assets/ui_book/metal/spark_g5.png) center / contain no-repeat; animation: dgcEmber 3.6s linear infinite; animation-delay: var(--d); }
.dgc.fam-red .dgc-em { filter: hue-rotate(-30deg) saturate(1.6); }
@keyframes dgcEmber { 0% { transform: translateY(0) scale(0.6); opacity: 0; } 15% { opacity: 0.95; } 100% { transform: translateY(-120px) scale(1); opacity: 0; } }
.dgc.wide .dgc-em { bottom: 8px; }
@keyframes dgcEmberW { 0% { transform: translateY(0) scale(0.6); opacity: 0; } 15% { opacity: 0.95; } 100% { transform: translateY(-60px) scale(1); opacity: 0; } }
.dgc.wide .dgc-em { animation-name: dgcEmberW; }
/* locked: grey but still handsome, the lock and its unlock level in the middle */
.dgc.lock .dgc-bn { filter: grayscale(0.85) brightness(0.55); }
.dgc.lock .dgc-fr { filter: grayscale(0.6) brightness(0.8) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
.dgc.lock .dgc-body, .dgc.lock .dgc-marks { opacity: 0.55; }
.dgc .dgc-lock { position: absolute; left: 50%; top: 31%; transform: translate(-50%, -50%); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; width: 86%; }
.dgc .dgc-lock img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 3px #000); }
.dgc .dgc-lock > span { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.dgc .dgc-lock b { font: 800 0.92rem/1 Fredoka, var(--thai, Mali, sans-serif); color: #fff1c4; -webkit-text-fill-color: #fff1c4; text-shadow: 0 1px 2px #000; }
.dgc .dgc-lock small { font: 700 0.6rem/1.2 var(--thai, Mali, sans-serif); color: #ffd6c8; -webkit-text-fill-color: #ffd6c8; text-shadow: 0 1px 2px #000; }

/* ---- the wide row (the daily dungeon page): name on the left, numbers in the middle, rewards and the boss on the right */
.dgc.wide { height: 92px; }
.dgc.wide .dgc-top { left: 14px; right: auto; top: 9px; gap: 8px; }
.dgc.wide .dgc-body { left: 14px; right: 92px; top: 30px; bottom: 9px; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 8px; }
.dgc.wide .dgc-head { flex: 1 1 auto; align-self: stretch; justify-content: flex-start; }
.dgc.wide .dgc-tier { font-size: 1.32rem; }
.dgc.wide .dgc-name { font-size: 0.78rem; }
.dgc.wide .dgc-nums { flex: 0 0 auto; align-items: flex-end; text-align: right; }
.dgc.wide .dgc-rw { order: 1; flex: none; align-self: flex-end; margin: 0 0 1px; }
.dgc.wide .dgc-nums { order: 2; }
.dgc.wide .dgc-req, .dgc.wide .dgc-you { font-size: 0.7rem; }
.dgc.wide .dgc-pips em { font-size: 0.68rem; }
.dgc.wide .dgc-lock { left: auto; right: 22px; top: 50%; transform: translateY(-50%); width: auto; flex-direction: row; gap: 6px; }
.dgc.wide .dgc-lock img { width: 30px; height: 30px; }
.dgc.wide .dgc-lock > span { align-items: flex-start; text-align: left; }
.dgc.wide .dgc-lock { background: rgba(10, 8, 18, 0.72); border-radius: 10px; padding: 4px 8px; }
.dgc.wide .dgc-lock small { max-width: 104px; white-space: normal; }
.dgc.wide .dgc-badge { order: 2; }

/* ---- the boss / party window in the book: taller cards (the info box below starts lower and scrolls) */
#ui .bw-bdg .bdg-tiers { height: 236px; display: block; }
#ui .bw-bdg .bdg-side { top: 440px; height: 412px; }
#bdg .bdg-tiers .dgc-row { height: 100%; }
/* (outside the book, the old flex column: the row stands) */
#bdg:not(.bookwin) .bdg-tiers .dgc-row { min-height: 220px; }

/* ---- the info boxes under the cards (level / time / entries), both pages: tier-tinted plates */
#bdg .bdg-facts > div, #ui .dgt-facts > div { position: relative; overflow: hidden; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--tc, #ffd98a) 45%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc, #ffd98a) 22%, rgba(22, 18, 32, 0.92)), rgba(16, 13, 24, 0.94) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 6px rgba(0, 0, 0, 0.35); }
#bdg .bdg-facts > div::before, #ui .dgt-facts > div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--tc, #ffd98a), transparent); }
#bdg .bdg-facts small, #ui .dgt-facts small { color: #d9c9a2 !important; -webkit-text-fill-color: #d9c9a2 !important; letter-spacing: 0.3px; }
#bdg .bdg-facts b, #ui .dgt-facts b { color: #fff8e6 !important; -webkit-text-fill-color: #fff8e6 !important; text-shadow: 0 0 10px color-mix(in srgb, var(--tc, #ffd98a) 60%, transparent); }
#bdg .bdg-facts b.bad { color: #ff8a7a !important; -webkit-text-fill-color: #ff8a7a !important; }
#bdg .bdg-facts span, #ui .dgt-facts span { color: #cfc4a8 !important; -webkit-text-fill-color: #cfc4a8 !important; }

/* ---- the light book styles (pastel, sakura...): the info plates go light with dark text, the cards keep their own plate */
:root[data-booklight] #bdg .bdg-facts > div, :root[data-booklight] #ui .dgt-facts > div {
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc, #ffd98a) 26%, #fffaf3), #fffaf3 75%);
  border-color: color-mix(in srgb, var(--tc, #ffd98a) 60%, #6a4a3a); box-shadow: inset 0 1px 0 #fff, 0 2px 5px rgba(90, 50, 40, 0.18); }
:root[data-booklight] #bdg .bdg-facts small, :root[data-booklight] #ui .dgt-facts small { color: #6a4c52 !important; -webkit-text-fill-color: #6a4c52 !important; }
:root[data-booklight] #bdg .bdg-facts b, :root[data-booklight] #ui .dgt-facts b { color: #2e1c26 !important; -webkit-text-fill-color: #2e1c26 !important; text-shadow: none; }
:root[data-booklight] #bdg .bdg-facts b.bad { color: #c0281c !important; -webkit-text-fill-color: #c0281c !important; }
:root[data-booklight] #bdg .bdg-facts span, :root[data-booklight] #ui .dgt-facts span { color: #5a4048 !important; -webkit-text-fill-color: #5a4048 !important; }
html:root[data-booklight] .panel .bdg-body .bdg-side .bdg-cpbox.ok .cp-r strong, html:root[data-booklight] #ui .dgt-cp.ok .cp-r strong { color: #2f7516 !important; -webkit-text-fill-color: #2f7516 !important; }
/* (a phone: the book is scaled as a whole, so the cards keep this layout) */
@media (prefers-reduced-motion: reduce) { .dgc, .dgc .dgc-fl, .dgc .dgc-em { animation: none !important; } }