/* Front-page Dragon Thrones band (Functions/thronedata.inc). Builds on front.css. */
.fp-thrones { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); padding: 16px 6px 14px; overflow: hidden;
  border-color: #4a3512;
  background: radial-gradient(ellipse 70% 140% at 50% 130%, rgba(222,110,29,.16), transparent 70%),
              linear-gradient(180deg, #15100a, #0e0b07); }
/* a slow gold glint along the top edge */
.fp-thrones::before { content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--dsl-gold-hi), transparent); animation: fpGlint 9s ease-in-out infinite; }
@keyframes fpGlint { 0%, 55% { left: -40%; } 100% { left: 100%; } }

.fp-wrap a.fp-seat { display: flex; align-items: center; gap: 13px; min-width: 0; padding: 8px 14px 6px; border-left: 1px solid var(--dsl-line);
  color: inherit; text-decoration: none; transition: background .2s; }
.fp-wrap a.fp-seat:first-child { border-left: 0; }
.fp-wrap a.fp-seat:hover { background: radial-gradient(ellipse at 30% 60%, color-mix(in srgb, var(--k) 14%, transparent), transparent 70%); }

/* the throne's back: an arch in the throne's colour */
.fp-arch { position: relative; flex: none; width: 56px; height: 72px; border: 1px solid var(--k); border-radius: 28px 28px 4px 4px;
  background: radial-gradient(ellipse 90% 60% at 50% 100%, color-mix(in srgb, var(--k) 35%, transparent), transparent 75%), #0a0806; }
.fp-arch img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; filter: saturate(1.1) contrast(1.05); }
.fp-seat-held .fp-arch::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 16px 1px var(--k), inset 0 -18px 18px -10px rgba(0,0,0,.8); animation: fpBreathe 5s ease-in-out infinite; }
@keyframes fpBreathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* a small gold crown above a held throne */
.fp-crown { position: absolute; top: -12px; left: 50%; width: 20px; height: 13px; margin-left: -10px;
  background: linear-gradient(180deg, var(--dsl-gold-hi), var(--dsl-gold));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 13'%3E%3Cpath d='M1 4l4.5 3.5L10 1l4.5 6.5L19 4l-2 9H3z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 13'%3E%3Cpath d='M1 4l4.5 3.5L10 1l4.5 6.5L19 4l-2 9H3z'/%3E%3C/svg%3E") center/contain no-repeat;
  filter: drop-shadow(0 0 4px rgba(255,190,80,.7)); }

/* embers drifting up inside the arch */
.fp-ember { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.fp-ember::before, .fp-ember::after { content: ""; position: absolute; bottom: -4px; width: 3px; height: 3px; border-radius: 50%;
  background: color-mix(in srgb, var(--k) 50%, #ffd27a); box-shadow: 0 0 6px 1px var(--k); opacity: 0; animation: fpRise 4.2s ease-in infinite; }
.fp-ember::before { left: 30%; }
.fp-ember::after { left: 62%; animation-delay: 2.1s; animation-duration: 5s; }
@keyframes fpRise { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(4px, -64px); opacity: 0; } }
.fp-seat-open .fp-ember::before, .fp-seat-open .fp-ember::after { animation-duration: 6.5s; }

/* sealed: the way hasn't been found */
.fp-seat-sealed .fp-arch { border-style: dashed; border-color: color-mix(in srgb, var(--k) 45%, #3a2c14); background: #0a0806; }
.fp-seat-sealed .fp-ember { display: none; }
.fp-seat-sealed .fp-seat-tx { opacity: .6; }

.fp-seat-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.fp-seat-land { color: var(--k); font: 700 10px var(--dsl-sans); letter-spacing: .14em; text-transform: uppercase; }
.fp-seat-name { color: #fff; font: 700 15px var(--dsl-serif); }
.fp-seat-lord { margin-top: 3px; color: var(--dsl-gold-hi); font: 700 14px/1.2 var(--dsl-serif); overflow-wrap: anywhere; }
.fp-seat-open .fp-seat-lord, .fp-seat-sealed .fp-seat-lord { color: var(--dsl-muted); font-weight: 600; }
.fp-seat-meta { color: var(--dsl-muted); font-size: 12px; }

.fp-sec-hd .fp-thr-count { color: var(--dsl-muted); font-size: 13px; white-space: nowrap; }
.fp-sec-hd .fp-thr-count b { color: var(--dsl-gold-hi); }

/* narrow screens: one swipeable row instead of squeezing five */
@media (max-width: 1000px) {
  .fp-thrones { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(215px, 1fr);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .fp-wrap a.fp-seat { scroll-snap-align: start; }
}
@media (max-width: 560px) { .fp-sec-hd .fp-thr-count { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .fp-thrones::before, .fp-seat-held .fp-arch::before, .fp-ember::before, .fp-ember::after { animation: none; }
  .fp-seat-held .fp-arch::before { opacity: .8; }
}