/* The homepage Jeli card (prefix .jt-): the landing page's face wall in miniature. */
@font-face {
    font-family: "Super Comic";
    src: url("../games/quiz/fonts/SuperComic.woff2") format("woff2"), url("../games/quiz/fonts/SuperComic.woff") format("woff");
    font-display: swap;
}
/* A div, not a link: the theme squeezes bare links in the feed. The button's hit area covers the card. */
.jt { background: #000; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); color: #fff; display: block; margin: 30px 0; overflow: hidden; position: relative; transition: transform .3s ease, box-shadow .3s ease; width: 100%; }
.jt:hover { box-shadow: 0 15px 35px rgba(0, 0, 0, .2); transform: translateY(-4px); }
.jt-wall { animation: jtDrift 40s linear infinite alternate; background-position: 50% 45%; background-size: 160% auto; inset: 0; opacity: .5; position: absolute; }
.jt-wall::after { background: radial-gradient(ellipse 80% 70% at 30% 50%, rgba(0, 0, 0, .9), rgba(0, 0, 0, .55) 70%, rgba(0, 0, 0, .3)), radial-gradient(120% 60% at 50% 120%, rgba(228, 77, 58, .45), transparent 70%); content: ''; inset: 0; position: absolute; }
@keyframes jtDrift { to { background-position: 40% 55%; } }
.jt-body { padding: 24px 26px 22px; position: relative; }
.jt-head { align-items: baseline; display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 18px; }
.jt-head .adk { color: #e44d3a; font-size: 26px; line-height: 1; align-self: center; }
.jt-brand { color: #fff; font-family: "Super Comic", 'Source Sans Pro', sans-serif; font-size: 30px; letter-spacing: 1px; line-height: 1; text-shadow: 3px 3px 0 #e44d3a; }
.jt-tag { color: rgba(255, 255, 255, .75); font-size: 15px; font-weight: 600; }
.jt-kicker { color: #53d690; font-size: 13px; font-weight: 700; letter-spacing: 1.2px; margin-bottom: 8px; text-transform: uppercase; }
.jt-clue { color: #fff; font-size: 22px; font-weight: 700; line-height: 1.35; margin-bottom: 12px; max-width: 560px; }
.jt-bar { background: #fff; border-radius: 3px; display: inline-block; height: .95em; margin: 0 .25em -.1em 0; overflow: hidden; position: relative; vertical-align: baseline; width: 4.2em; }
.jt-bar::after { animation: jtShimmer 1.8s ease-in-out infinite; background: linear-gradient(100deg, transparent 15%, rgba(228, 77, 58, .5) 50%, transparent 85%); content: ''; inset: 0; position: absolute; transform: translateX(-100%); }
@keyframes jtShimmer { 60%, 100% { transform: translateX(100%); } }
.jt-when { color: rgba(255, 255, 255, .85); font-size: 16px; line-height: 1.45; margin-bottom: 16px; max-width: 560px; }
.jt-go { background: #e44d3a; border-radius: 10px; color: #fff !important; display: inline-block; text-decoration: none !important; font-size: 17px; font-weight: 700; line-height: 1; padding: 14px 22px; }
.jt:hover .jt-go { background: #cf3f2d; }
.jt-go::after { content: ''; inset: 0; position: absolute; z-index: 1; }
.jt-answer { align-items: center; border-top: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .9); display: flex; font-size: 15px; gap: 10px; line-height: 1.35; margin-top: 18px; padding-top: 14px; }
.jt-answer img { border: 2px solid #53d690; border-radius: 50%; flex: none; height: 40px; object-fit: cover; width: 40px; }
.jt-answer b { color: #fff; }
@media (max-width: 600px) {
    .jt-body { padding: 20px 18px 18px; }
    .jt-clue { font-size: 19px; }
    .jt-go { display: block; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    .jt-wall, .jt-bar::after { animation: none; }
}