/* ─────────────────────────────────────────────────────────────
   QUEST CARDS · event cards, one design per vertical
     flagship   → Legendary: gold octagon frame, crown, foil sweep
     management → Strategy: cyan cut-corner frame, circuit grid
     cultural   → Arts: rose arch frame, lotus petals
     sports     → Arena: violet slanted frame, speed stripes
   ───────────────────────────────────────────────────────────── */
.qc--flagship {
  --c1: #f3c35f; --c2: #8a5a1a; --c3: #fff3c4;
  --shape: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
  --bg: radial-gradient(120% 70% at 50% 0%, rgba(243,195,95,.28), transparent 60%), linear-gradient(170deg, #4a1f0c, #2a0f2e 45%, #120830);
  --pattern: repeating-conic-gradient(from 0deg at 50% 120%, rgba(243,195,95,.16) 0 4deg, transparent 4deg 12deg);
  --bw: 3px;
}
.qc--management {
  --c1: #5fd8ff; --c2: #155a86; --c3: #d6f6ff;
  --shape: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 30px 100%, 0 calc(100% - 30px));
  --bg: radial-gradient(120% 70% at 100% 0%, rgba(95,216,255,.22), transparent 60%), linear-gradient(170deg, #0c2a4a, #16123d 50%, #0b0822);
  --pattern: linear-gradient(rgba(95,216,255,.14) 1px, transparent 1px) 0 0/18px 18px, linear-gradient(90deg, rgba(95,216,255,.14) 1px, transparent 1px) 0 0/18px 18px;
  --bw: 2px;
}
.qc--cultural {
  --c1: #ff6fb5; --c2: #8e1650; --c3: #ffe0f0;
  --shape: inset(0 round 999px 999px 18px 18px);
  --bg: radial-gradient(100% 60% at 50% 0%, rgba(255,111,181,.3), transparent 62%), linear-gradient(170deg, #5a0f3e, #2a1250 50%, #120830);
  --pattern: repeating-conic-gradient(from 0deg at 50% 100%, rgba(255,111,181,.2) 0 10deg, transparent 10deg 20deg);
  --bw: 2px;
}
.qc--sports {
  --c1: #b48bff; --c2: #ff8a3d; --c3: #f1e6ff;
  --shape: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  --bg: radial-gradient(110% 70% at 0% 0%, rgba(255,138,61,.22), transparent 60%), linear-gradient(170deg, #2a1470, #1a0d3c 50%, #0c0620);
  --pattern: repeating-linear-gradient(115deg, rgba(180,139,255,.16) 0 10px, transparent 10px 26px);
  --bw: 2px;
}

.qc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 26px 22px; }
.qc { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--ivory);
  transform: perspective(800px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); transition: transform .25s, filter .35s;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.45)); }
.qc.hide { display: none; }
.qc:hover, .qc:focus-visible { filter: drop-shadow(0 0 16px color-mix(in srgb, var(--c1) 65%, transparent)) drop-shadow(0 14px 26px rgba(0,0,0,.5)); outline: none; }

.qc__border { position: absolute; inset: 0; clip-path: var(--shape);
  background: linear-gradient(135deg, var(--c2), var(--c1) 25%, var(--c3) 50%, var(--c1) 75%, var(--c2)); background-size: 260% 260%; animation: qcBorder 7s linear infinite; }
@keyframes qcBorder { to { background-position: 260% 260%; } }
.qc__body { position: relative; margin: var(--bw); min-height: 330px; clip-path: var(--shape); display: flex; flex-direction: column; background: var(--bg); padding: 16px 18px 14px; overflow: hidden; }
.qc__body::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%); transform: translateX(-130%); transition: transform .9s; }
.qc:hover .qc__body::after { transform: translateX(130%); }

.qc__top { display: flex; align-items: center; gap: 8px; position: relative; z-index: 1; }
.qc__icon { width: 22px; height: 22px; color: var(--c1); filter: drop-shadow(0 0 6px var(--c1)); flex: none; }
.qc__icon svg { width: 100%; height: 100%; }
.qc__type { font: italic 800 .72rem/1 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--c1); }
.qc__rank { margin-left: auto; font: 400 .6rem/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: #160b33; padding: 5px 9px 4px; background: linear-gradient(180deg, var(--c3), var(--c1)); clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }

.qc__art { position: relative; height: 118px; margin: 12px -18px 10px; overflow: hidden; display: grid; place-items: center; }
.qc__pattern { position: absolute; inset: 0; background: var(--pattern); opacity: .9;
  -webkit-mask: radial-gradient(80% 90% at 50% 50%, #000 30%, transparent 75%); mask: radial-gradient(80% 90% at 50% 50%, #000 30%, transparent 75%); }
.qc__glyph { position: absolute; right: 8px; top: -16px; font: 400 7.2rem/1 var(--f-display); color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--c1) 55%, transparent); opacity: .7; transition: transform .6s; }
.qc__sigil { position: relative; width: 70px; height: 70px; display: grid; place-items: center; color: var(--c3);
  border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c1) 45%, transparent), transparent 70%); filter: drop-shadow(0 0 14px var(--c1)); animation: sigilFloat 4s ease-in-out infinite; transition: transform .6s cubic-bezier(.3,1.5,.5,1); }
.qc__sigil svg { width: 42px; height: 42px; }
@keyframes sigilFloat { 50% { translate: 0 -6px; } }
.qc:hover .qc__sigil { transform: scale(1.2) rotate(-12deg); }
.qc:hover .qc__glyph { transform: translateX(-10px) scale(1.05); }

.qc__plate { position: relative; z-index: 1; padding-bottom: 10px; }
.qc__plate::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 3px; background: linear-gradient(90deg, var(--c1), transparent); clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%); transition: width .5s; }
.qc:hover .qc__plate::after { width: 100%; }
.qc__name { display: block; font: italic 900 1.22rem/1.12 var(--f-ui); letter-spacing: .03em; text-transform: uppercase; text-wrap: balance;
  background: linear-gradient(180deg, #fff 30%, var(--c3) 60%, var(--c1)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(10,4,24,.9)); }
.qc__text { position: relative; z-index: 1; margin-top: 10px; color: var(--mist); font-size: .86rem; line-height: 1.5; flex: 1; }
.qc__foot { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 10px; border-top: 1px dashed color-mix(in srgb, var(--c1) 45%, transparent); }
.qc__foot > span:first-child { font: 400 .62rem/1 var(--f-display); letter-spacing: .1em; color: var(--muted); }
.qc__go { font: italic 800 .72rem/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--c1); transition: letter-spacing .3s; }
.qc:hover .qc__go { letter-spacing: .26em; }

/* vertical-specific extras */
.qc--flagship .qc__body { box-shadow: inset 0 0 0 1px rgba(255,240,200,.3), inset 0 0 40px rgba(243,195,95,.15); }
.qc--flagship .qc__body::before { content: ""; position: absolute; inset: 7px; clip-path: var(--shape); box-shadow: inset 0 0 0 1px rgba(243,195,95,.4); pointer-events: none; }
.qc--flagship .qc__border { animation-duration: 3.5s; }
.qc--cultural .qc__body { padding-top: 34px; }
.qc--cultural .qc__top { justify-content: center; flex-wrap: wrap; }
.qc--cultural .qc__rank { margin-left: 0; }
.qc--cultural .qc__plate, .qc--cultural .qc__text { text-align: center; }
.qc--cultural .qc__plate::after { left: 50%; translate: -50% 0; background: linear-gradient(90deg, transparent, var(--c1), transparent); }
.qc--sports .qc__body { padding-inline: 26px; }
.qc--sports .qc__art { margin-inline: -26px; }
.qc--sports .qc__pattern { animation: stripes 1.4s linear infinite; }
@keyframes stripes { to { background-position: 56px 0; } }
.qc--management .qc__pattern::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(95,216,255,.8) 1.6px, transparent 2px) 9px 9px/36px 36px; }

/* phones: two compact cards per row */
@media (max-width: 560px) {
  .qc-grid { grid-template-columns: 1fr 1fr; gap: 14px 12px; }
  .qc__body { min-height: 236px; padding: 12px 12px 10px; }
  .qc--cultural .qc__body { padding-top: 26px; }
  .qc--sports .qc__body { padding-inline: 18px; }
  .qc--sports .qc__art { margin-inline: -18px; }
  .qc__art { height: 78px; margin: 8px -12px 6px; }
  .qc__sigil { width: 52px; height: 52px; }
  .qc__sigil svg { width: 30px; height: 30px; }
  .qc__glyph { font-size: 4.6rem; top: -8px; }
  .qc__rank, .qc__text, .qc__foot > span:first-child { display: none; }
  .qc__type { font-size: .62rem; letter-spacing: .16em; }
  .qc__name { font-size: .95rem; }
  .qc__foot { justify-content: center; margin-top: 10px; }
  .qc__go { font-size: .64rem; }
}