/* 20/10/2026: MMO panels on the landing page (hero chips, dragons, four beasts, Ender Dragon, living world, Quỷ vực).
   Same palette and type as site.css; spacing on the 4/8/16/24/32/48 scale; --el is the tint each card sets for itself. */

/* ---------- the shared game panel: black outline, thin border, one gold line on top, tiny studs in the corners ---------- */
.dcard, .bcard, .fcard, .night, .quest-line li, .loot li, .ender-card, .phases, .hero__feats a {
  --pan: var(--el, var(--torch));
  position: relative;
  background: linear-gradient(180deg, color-mix(in oklab, var(--pan) 9%, var(--panel)), #17141c);
  box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px var(--border), inset 0 4px 0 4px color-mix(in oklab, var(--pan) 55%, var(--border));
}
.dcard::before, .bcard::before, .fcard::before, .night::before, .ender-card::before {   /* corner studs */
  content: ""; position: absolute; inset: 6px; pointer-events: none;
  background:
    linear-gradient(var(--pan), var(--pan)) top left / 6px 6px no-repeat,
    linear-gradient(var(--pan), var(--pan)) top right / 6px 6px no-repeat,
    linear-gradient(var(--pan), var(--pan)) bottom left / 6px 6px no-repeat,
    linear-gradient(var(--pan), var(--pan)) bottom right / 6px 6px no-repeat;
  opacity: .8;
}
.eyebrow { font: 16px/1 var(--font-pixel); color: var(--torch); text-shadow: 2px 2px 0 #000; margin-bottom: var(--s3); }
.chip { display: inline-block; padding: var(--s1) var(--s2); font: 600 14px/1.2 var(--font-body); color: var(--pan, var(--torch));
  background: color-mix(in oklab, var(--pan, var(--torch)) 14%, #0d0b10); box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--pan, var(--torch)) 60%, #000); }
.chip--rare { --pan: #d65cd6; }
.mmo-link { color: var(--torch); text-decoration: none; font-weight: 600; border-bottom: 2px solid color-mix(in oklab, var(--torch) 40%, transparent); }
.mmo-link:hover, .mmo-link:focus-visible { color: #ffd23f; border-bottom-color: #ffd23f; }
.chapter--mmo .note--more { text-align: center; margin-inline: auto; }

/* ---------- hero feature chips ---------- */
.hero__feats { list-style: none; margin: var(--s4) auto 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); max-width: 460px; }
.hero__feats a { display: grid; justify-items: center; gap: var(--s1); padding: var(--s2) var(--s1); text-decoration: none; text-align: center; }
.hero__feats b { font: 400 20px/1 var(--font-pixel); color: var(--torch); text-shadow: 2px 2px 0 #000; white-space: nowrap; }
.hero__feats span { font-size: 14px; color: var(--paper); line-height: 1.2; }
.hero__feats a:hover, .hero__feats a:focus-visible { --pan: #ffd23f; }
@media (min-width: 900px) { .hero__feats { margin-inline: 0; } }
@media (max-width: 420px) { .hero__feats b { font-size: 16px; } .hero__feats span { font-size: 13px; } }

/* ---------- eleven dragons ---------- */
.dgrid { list-style: none; margin: 0 auto; padding: 0; max-width: var(--max-w); display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; }
.dcard { width: calc(50% - var(--s1)); display: grid; justify-items: center; gap: var(--s2); padding: var(--s3) var(--s2) var(--s3); text-align: center; }
.dcard::after { content: ""; position: absolute; left: 12%; right: 12%; top: 12%; height: 52%; background: radial-gradient(closest-side, color-mix(in oklab, var(--el) 38%, transparent), transparent); pointer-events: none; z-index: 0; }
.dcard img { position: relative; z-index: 1; width: 100%; max-width: 160px; aspect-ratio: 4 / 3; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .7)); }
.dcard b { position: relative; z-index: 1; font: 600 17px/1.2 var(--font-body); color: #fff; }
.dcard .chip { position: relative; z-index: 1; --pan: var(--el); }
@media (min-width: 600px) { .dcard { width: calc(33.33% - var(--s2)); } }
@media (min-width: 900px) { .dcard { width: calc(16.66% - 7px); } }   /* six and five, the last row centred */

.quest-line { list-style: none; counter-reset: q; margin: 0 auto; padding: 0; max-width: var(--max-w); display: grid; gap: var(--s2); grid-template-columns: 1fr; }
@media (min-width: 700px) { .quest-line { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .quest-line { grid-template-columns: repeat(4, 1fr); } }
.quest-line li { counter-increment: q; display: grid; gap: var(--s1); padding: var(--s4) var(--s3) var(--s3); align-content: start; }
.quest-line li::before { content: counter(q); position: absolute; top: -12px; left: var(--s3); display: grid; place-items: center; width: 32px; height: 32px;
  font: 16px/1 var(--font-pixel); color: #1a1208; background: var(--torch); box-shadow: 0 0 0 2px #000, 3px 3px 0 2px #000; }
.quest-line b { font: 600 18px/1.3 var(--font-body); color: #fff; }
.quest-line span { color: var(--muted); font-size: 16px; line-height: 1.5; }

/* ---------- four beasts ---------- */
.bgrid { list-style: none; margin: 0 auto; padding: 0; max-width: var(--max-w); display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 560px) { .bgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .bgrid { grid-template-columns: repeat(4, 1fr); } }
.bcard { display: grid; gap: var(--s2); padding: var(--s5) var(--s3) var(--s3); text-align: center; align-content: start; overflow: hidden; }
.bcard::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 60%; background: radial-gradient(closest-side at 50% 45%, color-mix(in oklab, var(--el) 30%, transparent), transparent); pointer-events: none; }
.bcard > * { position: relative; z-index: 1; }
.bcard__dir { justify-self: center; padding: var(--s1) var(--s3); font: 16px/1 var(--font-pixel); color: #1a1208; background: var(--el); box-shadow: 0 0 0 2px #000; margin-top: calc(-1 * var(--s3)); }
.bcard img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .75)); }
.bcard h3 { font: 24px/1.2 var(--font-pixel); text-shadow: 2px 2px 0 #000; color: var(--el); }
.bcard p { color: var(--paper); font-size: 16px; line-height: 1.5; }
.bcard .bcard__weak { color: var(--muted); font-size: 15px; }

.phases { max-width: 720px; margin: 0 auto; padding: var(--s3) var(--s4); display: grid; gap: var(--s2); text-align: center; --el: #ff5555; }
.phases__label { font: 16px/1 var(--font-pixel); color: #ff8a8a; text-shadow: 2px 2px 0 #000; }
.phases__bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s1); }
.phases__bar i { height: 16px; background: linear-gradient(#ff6b6b, #b81f2d); box-shadow: inset 0 0 0 2px #000; }
.phases__bar i.is-ult { background: linear-gradient(#ffe27a, #e08a00); box-shadow: inset 0 0 0 2px #000, 0 0 16px rgba(255, 190, 40, .6); }
.phases p { color: var(--paper); font-size: 16px; }

.loot { list-style: none; margin: 0 auto; padding: 0; max-width: var(--max-w); display: grid; gap: var(--s2); grid-template-columns: 1fr; }
@media (min-width: 800px) { .loot { grid-template-columns: repeat(3, 1fr); } }
.loot li { display: grid; gap: var(--s1); padding: var(--s3); align-content: start; }
.loot b { font: 600 17px/1.3 var(--font-body); color: #ffd23f; }
.loot span { color: var(--paper); font-size: 16px; line-height: 1.5; }

/* ---------- Ender Dragon ---------- */
.ender-card { --el: #b05cf0; max-width: var(--max-w); margin: 0 auto; width: 100%; display: grid; gap: var(--s4); padding: var(--s5) var(--s4); align-items: center; overflow: hidden; }
@media (min-width: 800px) { .ender-card { grid-template-columns: 280px 1fr; gap: var(--s6); padding: var(--s6); } }
.ender-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 70% at 20% 50%, rgba(176, 92, 240, .28), transparent 70%); pointer-events: none; }
.ender-card > * { position: relative; z-index: 1; }
.ender-card__art { width: 100%; max-width: 256px; margin-inline: auto; filter: drop-shadow(0 0 28px rgba(176, 92, 240, .55)); }
.ender-card__body { display: grid; gap: var(--s3); justify-items: start; }
.ender-card h2 { font-size: 32px; }
@media (min-width: 900px) { .ender-card h2 { font-size: 48px; } }
.ender-card .chapter__lead { margin-top: 0; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.chips li { padding: var(--s1) var(--s2); font: 600 14px/1.2 var(--font-body); color: var(--paper); background: #0d0b10; box-shadow: inset 0 0 0 2px #000, inset 0 0 0 3px var(--border); }
@media (max-width: 799px) { .ender-card__body { justify-items: center; text-align: center; } .chips { justify-content: center; } }

/* ---------- living world ---------- */
.fgrid { list-style: none; margin: 0 auto; padding: 0; max-width: var(--max-w); display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .fgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .fgrid { grid-template-columns: repeat(3, 1fr); } }
.fcard { display: grid; gap: var(--s2); padding: var(--s4) var(--s3) var(--s3); align-content: start; grid-template-columns: 48px 1fr; column-gap: var(--s3); }
.fcard img { grid-row: span 2; width: 48px; height: 48px; image-rendering: pixelated; }
.fcard h3 { font: 600 18px/1.3 var(--font-body); align-self: center; }
.fcard p { grid-column: 1 / -1; color: var(--muted); font-size: 16px; line-height: 1.55; }

/* ---------- Quỷ vực ---------- */
.chapter--blood { background: linear-gradient(180deg, var(--bg-deep), #14090d 55%, var(--bg-deep)); }
.chapter--blood::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 40% at 50% 38%, rgba(214, 40, 56, .16), transparent 70%); pointer-events: none; }
.chapter--blood .eyebrow { color: #ff7b86; }
.nights { list-style: none; margin: 0 auto; padding: 0; max-width: var(--max-w); display: grid; gap: var(--s2); grid-template-columns: repeat(2, 1fr); --el: #c9303f; }
@media (min-width: 640px) { .nights { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .nights { grid-template-columns: repeat(7, 1fr); } }
.night { display: grid; justify-items: center; gap: var(--s1); padding: var(--s3) var(--s2); text-align: center; }
.night img { width: 100%; max-width: 128px; aspect-ratio: 4 / 3; object-fit: contain; filter: brightness(0) drop-shadow(0 0 6px rgba(214, 40, 56, .75)); opacity: .85; }
.night__no { font: 14px/1.2 var(--font-body); color: var(--muted); }
.night b { font: 600 16px/1.25 var(--font-body); color: #fff; text-wrap: balance; }
.night time { font: 14px/1 var(--font-pixel); color: #ff7b86; }
.night.is-past img { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .7)); opacity: 1; }
.night.is-open { --el: #ff5566; }
.night.is-open img { filter: brightness(0) drop-shadow(0 0 10px rgba(255, 70, 90, .95)); }
.night--final { grid-column: 1 / -1; }
@media (min-width: 640px) { .night--final { grid-column: auto; } }
@media (min-width: 640px) and (max-width: 999px) { .night--final { grid-column: 2 / span 2; } }

/* ---------- small motion, only when allowed ---------- */
@media (prefers-reduced-motion: no-preference) {
  .dcard, .bcard, .fcard, .night, .hero__feats a { transition: translate .2s ease-out, filter .2s; }
  .dcard:hover, .bcard:hover, .fcard:hover, .night:hover, .hero__feats a:hover { translate: 0 -4px; filter: brightness(1.12); }
  .night.is-open { animation: night-pulse 2.4s ease-in-out infinite; }
  .phases__bar i.is-ult { animation: ult-glow 1.6s ease-in-out infinite alternate; }
}
@keyframes night-pulse { 50% { box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px var(--border), inset 0 4px 0 4px #ff5566, 0 0 24px rgba(255, 70, 90, .45); } }
@keyframes ult-glow { to { box-shadow: inset 0 0 0 2px #000, 0 0 28px rgba(255, 190, 40, .9); } }