/* MineVault portal – the wiki (6.54): a knowledge base in three columns – the side bar with the page tree, the page,
 * "On this page". The colour of the area (--wk) is the accent. Calm dark surfaces in every design; works on phones. */
.page-wiki main { padding-top: 0; }
.wk-root { --wk: #4BDE6E; --wk-soft: color-mix(in srgb, var(--wk) 16%, transparent); --wk-line: rgb(255 255 255 / .07);
  --wk-card: color-mix(in srgb, var(--bg-2, #16181d) 92%, #000); --wk-ink: var(--ink, #eef1f5); --wk-ink-2: var(--ink-2, #b9c0cc); }

/* ---------- the banner with the area tabs ---------- */
.wk-banner { position: relative; height: 112px; margin-bottom: 26px; display: flex; align-items: flex-end;
  background: linear-gradient(180deg, rgb(0 0 0 / .1), var(--bg-1, #101216) 96%), url(/brand/home-night) center 60% / cover no-repeat; }
/* 7.3.1: a strip of 112 px – the smaller copies of the night picture are enough (an own picture is served as it is) */
@supports (background-image: image-set(url("/brand/home-night") 1x)) {
  .wk-banner { background-image: linear-gradient(180deg, rgb(0 0 0 / .1), var(--bg-1, #101216) 96%), image-set(url(/brand/home-night?w=960) 1x, url(/brand/home-night?w=1600) 2x); }
  @media (max-width: 640px) { .wk-banner { background-image: linear-gradient(180deg, rgb(0 0 0 / .1), var(--bg-1, #101216) 96%), image-set(url(/brand/home-night?w=640) 1x, url(/brand/home-night?w=960) 2x); } }
  @media (min-width: 1101px) { .wk-banner { background-image: linear-gradient(180deg, rgb(0 0 0 / .1), var(--bg-1, #101216) 96%), image-set(url(/brand/home-night?w=1600) 1x, url(/brand/home-night) 2x); } }
}
.wk-banner .container { width: 100%; display: flex; justify-content: center; transform: translateY(18px); }
/* 8.6.0: the banner names the wiki (before, a lone area pill sat half over the picture and the name came twice) */
.wk-banner .container { flex-direction: column; align-items: center; gap: 8px; }
.wk-banner-title { display: flex; align-items: baseline; gap: 10px; text-shadow: 0 2px 10px rgb(0 0 0 / .7); }
.wk-banner-title b { font: 900 1.5rem/1.1 var(--font-display, var(--font, system-ui)); color: #fff; letter-spacing: .01em; }
.wk-banner-title .wk-kicker { color: var(--gold, #f2b440); }
.wk-banner:not(:has(.wk-areas)) .container { transform: none; padding-bottom: 14px; }
.wk-areas { display: inline-flex; gap: 6px; padding: 6px; border-radius: 999px; background: rgb(14 16 20 / .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px var(--wk-line), 0 14px 30px -14px rgb(0 0 0 / .8); }
.wk-area { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; color: var(--wk-ink-2); font-weight: 800; font-size: .88rem; text-decoration: none;
  transition: background var(--mv-dur-fast) var(--mv-ease-out), color var(--mv-dur-fast) var(--mv-ease-out); }
.wk-area:hover { color: #fff; background: rgb(255 255 255 / .06); text-decoration: none; }
.wk-area[aria-current="page"] { color: var(--c-ink, #fff); background: var(--c, var(--wk)); box-shadow: 0 6px 18px -8px var(--c, var(--wk)), inset 0 1px 0 rgb(255 255 255 / .25); }
.wk-areas.small { display: flex; flex-wrap: wrap; gap: 4px; padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; margin-bottom: 12px; }
.wk-areas.small .wk-area { padding: 4px 10px; font-size: .74rem; background: rgb(255 255 255 / .05); }
.wk-areas.small .wk-area[aria-current="page"] { background: var(--c, var(--wk)); }

/* ---------- three columns ---------- */
.wk-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr) 210px; gap: 34px; align-items: start; padding-bottom: 60px; }
.wk-main { min-width: 0; }
@media (max-width: 1180px) { .wk-layout { grid-template-columns: 270px minmax(0, 1fr); } .wk-toc { display: none; } }
@media (max-width: 860px) { .wk-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; } .wk-banner { height: 84px; } }
/* phones: the side bar folds into one row with a "Pages" button */
.wk-side-toggle { display: none; margin-left: auto; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 8px; background: rgb(255 255 255 / .06); color: var(--wk-ink); font: 800 .8rem/1 var(--font, system-ui); cursor: pointer; }
.wk-side-toggle .icon:last-child { transition: transform var(--mv-dur-fast) var(--mv-ease-out); }
@media (max-width: 860px) {
  .wk-side { position: static; max-height: none; }
  .wk-side-toggle { display: inline-flex; }
  .wk-side-head { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
  .wk-side:not(.open) .wk-side-card > :not(.wk-side-head) { display: none; }
  .wk-side.open .wk-side-head { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--wk-line); }
  .wk-side.open .wk-side-toggle .icon:last-child { transform: rotate(180deg); }
  .wk-side .wk-areas.small { display: none; }
}

/* ---------- side bar ---------- */
.wk-side { position: sticky; top: calc(var(--header-h, 64px) + 16px); max-height: calc(100vh - var(--header-h, 64px) - 32px); }
.wk-side-card { padding: 16px; border-radius: 14px; background: var(--wk-card); box-shadow: inset 0 0 0 1px var(--wk-line), 0 10px 30px -18px rgb(0 0 0 / .8);
  max-height: inherit; overflow-y: auto; scrollbar-width: thin; }
.wk-side-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--wk-line); }
.wk-side-head b { font-size: 1rem; font-weight: 900; }
.wk-side-ic { font-size: 1.1rem; }
.wk-search { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 10px; margin-bottom: 14px; border-radius: 10px; background: rgb(0 0 0 / .28); box-shadow: inset 0 0 0 1px var(--wk-line); }
.wk-search:focus-within { box-shadow: inset 0 0 0 2px var(--wk); }
.wk-search > .icon { color: var(--ink-3); flex: none; }
.wk-search input { flex: 1; min-width: 0; border: 0; background: none; box-shadow: none; padding: 10px 0; font-size: .9rem; }
.wk-kbd { font: 700 .7rem/1 var(--mono, monospace); padding: 3px 6px; border-radius: 5px; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--wk-line); }
.wk-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; padding: 6px; border-radius: 12px; background: #14171c; box-shadow: inset 0 0 0 1px var(--wk-line), 0 20px 40px -14px rgb(0 0 0 / .85);
  animation: menu-in var(--mv-dur-base) var(--mv-ease-out); }
.wk-hit { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; color: var(--wk-ink); text-decoration: none; }
.wk-hit:hover, .wk-hit:focus-visible { background: var(--wk-soft); text-decoration: none; outline: none; }
.wk-hit > span:last-child { display: grid; gap: 2px; min-width: 0; }
.wk-hit small { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wk-hit.empty { color: var(--ink-3); font-size: .88rem; }
.wk-section + .wk-section { margin-top: 14px; }
.wk-section-h { padding: 6px 8px; font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.wk-nav, .wk-sub { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.wk-sub { display: none; margin: 2px 0 4px 18px; padding-left: 8px; border-left: 1px solid var(--wk-line); }
.wk-item.open > .wk-sub { display: grid; }
.wk-row { display: flex; align-items: center; gap: 2px; }
.wk-nav-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: var(--wk-ink-2); font-size: .9rem; font-weight: 600; text-decoration: none;
  transition: background var(--mv-dur-fast) var(--mv-ease-out), color var(--mv-dur-fast) var(--mv-ease-out); }
.wk-nav-link:hover { background: rgb(255 255 255 / .05); color: #fff; text-decoration: none; }
.wk-nav-link[aria-current="page"] { color: #fff; background: linear-gradient(90deg, var(--wk-soft), color-mix(in srgb, var(--wk) 6%, transparent));
  box-shadow: inset 3px 0 0 var(--wk), inset 0 0 0 1px color-mix(in srgb, var(--wk) 35%, transparent); font-weight: 800; }
.wk-nav-ic { width: 22px; flex: none; text-align: center; font-size: 1rem; line-height: 1; }
.wk-nav-t { overflow: hidden; text-overflow: ellipsis; }
.wk-twist { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border: 0; border-radius: 7px; background: none; color: var(--ink-3); cursor: pointer;
  transition: transform var(--mv-dur-fast) var(--mv-ease-out), background var(--mv-dur-fast) var(--mv-ease-out); transform: rotate(-90deg); }
.wk-twist:hover { background: rgb(255 255 255 / .06); color: #fff; }
.wk-twist[aria-expanded="true"] { transform: none; }
.wk-side-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--wk-line); }

/* ---------- the page ---------- */
.wk-crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .8rem; color: var(--ink-3); margin-bottom: 6px; }
.wk-crumbs a { color: var(--ink-2); }
.wk-crumbs .sep { opacity: .6; }
.wk-head { position: relative; margin-bottom: 20px; }
.wk-head h1 { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.12; letter-spacing: -.01em; text-transform: none; }
.wk-head h1::after { display: none; }
.wk-h1-ic { font-size: .9em; }
.wk-lead { margin: 0; color: var(--wk-ink-2); font-size: 1.04rem; line-height: 1.55; max-width: 62ch; }
.wk-head-tools { display: flex; gap: 8px; margin-top: 14px; }
.wk-cover { margin: 0 0 26px; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px var(--wk-line), 0 24px 50px -26px rgb(0 0 0 / .9); background: #0d0f12; }
.wk-cover img { display: block; width: 100%; max-height: 420px; object-fit: cover; }
.wk-body { font-size: 1rem; line-height: 1.75; color: var(--wk-ink); }
.wk-body p { margin: 0 0 1em; }
.wk-body strong { color: #fff; }
.wk-body a { color: var(--wk); text-decoration-color: color-mix(in srgb, var(--wk) 45%, transparent); }
.wk-body a.wk-link { text-decoration: none; font-weight: 700; border-bottom: 1px dashed color-mix(in srgb, var(--wk) 60%, transparent); }
.wk-body a.wk-link.missing { color: var(--bad, #ff6b6b); border-bottom-color: currentColor; }
.wk-h { position: relative; scroll-margin-top: calc(var(--header-h, 64px) + 20px); text-transform: none; letter-spacing: -.005em; }
h2.wk-h { margin: 1.8em 0 .7em; padding-bottom: 10px; font-size: 1.45rem; border-bottom: 1px solid var(--wk-line); }
h3.wk-h { margin: 1.5em 0 .5em; font-size: 1.12rem; }
.wk-h::after { display: none; }
.wk-anchor { margin-left: 8px; color: var(--ink-3); text-decoration: none; opacity: 0; transition: opacity var(--mv-dur-fast) var(--mv-ease-out); }
.wk-h:hover .wk-anchor, .wk-anchor:focus-visible { opacity: 1; }
.wk-body .fm-img img { border-radius: 12px; }
.wk-body ul, .wk-body ol { padding-left: 1.3em; }
.wk-body li { margin: .25em 0; }
.wk-body li::marker { color: var(--wk); }

/* boxes */
.wk-box { color: var(--wk-ink); display: flex; gap: 12px; align-items: flex-start; margin: 0 0 1.2em; padding: 14px 16px; border-radius: 12px; background: rgb(56 140 240 / .1); box-shadow: inset 0 0 0 1px rgb(80 160 255 / .28); }
.wk-box .wk-box-ic { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; color: #fff; background: #3b82f6; }
.wk-box .wk-box-ic .icon { width: 14px; height: 14px; }
.wk-box-body { min-width: 0; }
.wk-box-body > :last-child { margin-bottom: 0; }
.wk-box-title { display: block; margin-bottom: 2px; color: #fff; }
.wk-box.tip { background: rgb(40 200 120 / .1); box-shadow: inset 0 0 0 1px rgb(60 210 130 / .3); } .wk-box.tip .wk-box-ic { background: #1fa85a; }
.wk-box.warn { background: rgb(255 170 30 / .1); box-shadow: inset 0 0 0 1px rgb(255 176 32 / .35); } .wk-box.warn .wk-box-ic { background: #e08a00; }
.wk-box.danger { background: rgb(240 70 70 / .1); box-shadow: inset 0 0 0 1px rgb(255 90 90 / .35); } .wk-box.danger .wk-box-ic { background: var(--c-danger); }

/* quick-access cards */
.wk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 0 0 1.4em; }
.wk-card { position: relative; display: grid; justify-items: center; align-content: start; gap: 8px; padding: 22px 14px 18px; border-radius: 14px; text-align: center; text-decoration: none; color: var(--wk-ink);
  background: var(--wk-card); box-shadow: inset 0 0 0 1px var(--wk-line), 0 6px 0 rgb(0 0 0 / .25);
  transition: transform var(--mv-dur-fast) var(--mv-ease-out), box-shadow var(--mv-dur-fast) var(--mv-ease-out), background var(--mv-dur-fast) var(--mv-ease-out); }
.wk-card:hover { transform: translateY(-3px); text-decoration: none; background: color-mix(in srgb, var(--wk) 6%, var(--wk-card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wk) 45%, transparent), 0 10px 24px -12px color-mix(in srgb, var(--wk) 50%, transparent); }
.wk-card-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; font-size: 1.7rem; background: rgb(255 255 255 / .04); box-shadow: inset 0 0 0 1px var(--wk-line);
  transition: transform var(--mv-dur-fast) var(--mv-ease-spring); }
.wk-card:hover .wk-card-ic { transform: scale(1.08) rotate(-4deg); }
.wk-card b { color: var(--wk); font-weight: 900; }
.wk-body .wk-card, .wk-card * { text-decoration: none; }
.wk-card-text { font-size: .82rem; line-height: 1.4; color: var(--ink-3); }

/* tables */
.wk-table { margin: 0 0 1.2em; overflow-x: auto; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--wk-line); }
.wk-table table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.wk-table th { text-align: left; padding: 10px 14px; background: rgb(0 0 0 / .25); color: var(--wk-ink-2); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; }
.wk-table td { padding: 10px 14px; border-top: 1px solid var(--wk-line); }
.wk-table tr:hover td { background: rgb(255 255 255 / .02); }

/* foot */
.wk-children { margin-top: 10px; }
.wk-foot { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--wk-line); display: grid; gap: 14px; }
.wk-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wk-pn-a { display: grid; gap: 2px; padding: 12px 16px; border-radius: 12px; text-decoration: none; color: var(--wk-ink); box-shadow: inset 0 0 0 1px var(--wk-line); transition: box-shadow var(--mv-dur-fast) var(--mv-ease-out); }
.wk-pn-a.next { text-align: right; }
.wk-pn-a small { color: var(--ink-3); }
.wk-pn-a:hover { text-decoration: none; box-shadow: inset 0 0 0 1px var(--wk); }

/* ---------- on this page ---------- */
.wk-toc { position: sticky; top: calc(var(--header-h, 64px) + 20px); }
.wk-toc-h { margin-bottom: 10px; font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.wk-toc-list { display: grid; border-left: 1px solid var(--wk-line); }
.wk-toc-list a { padding: 5px 0 5px 12px; margin-left: -1px; border-left: 2px solid transparent; color: var(--ink-3); font-size: .82rem; line-height: 1.35; text-decoration: none;
  transition: color var(--mv-dur-fast) var(--mv-ease-out), border-color var(--mv-dur-fast) var(--mv-ease-out); }
.wk-toc-list a:hover { color: #fff; }
.wk-toc-list a.on { color: var(--wk); border-left-color: var(--wk); font-weight: 700; }

/* ---------- empty wiki / page missing ---------- */
.wk-empty { display: grid; justify-items: center; gap: 12px; padding: 60px 20px; text-align: center; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--wk-line); background: var(--wk-card); }
.wk-empty-ic { font-size: 3rem; }
.wk-empty h1 { margin: 0; font-size: 1.6rem; text-transform: none; }
.wk-empty h1::after { display: none; }

/* ---------- editor ---------- */
.wk-editor { padding-top: 24px; padding-bottom: 60px; }
.wk-ed-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px; margin-bottom: 18px; }
.wk-ed-top h1 { text-transform: none; }
.wk-ed-top h1::after { display: none; }
.wk-ed-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 1100px) { .wk-ed-grid { grid-template-columns: minmax(0, 1fr); } }
.wk-ed-form { display: grid; gap: 16px; }
.wk-ed-card { display: grid; gap: 14px; padding: 18px; border-radius: 14px; background: var(--wk-card); box-shadow: inset 0 0 0 1px var(--wk-line); }
.wk-ed-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.wk-ed-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .wk-ed-row, .wk-ed-row.three { grid-template-columns: minmax(0, 1fr); } }
.wk-field { display: grid; gap: 6px; }
.wk-label { font-size: .74rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--wk-ink-2); }
.wk-icon-in { width: 64px; text-align: center; font-size: 1.2rem; }
.wk-emoji { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; padding: 8px; border-radius: 10px; background: #12141a; box-shadow: inset 0 0 0 1px var(--wk-line); }
.wk-emoji button { border: 0; background: none; font-size: 1.2rem; padding: 4px; border-radius: 6px; cursor: pointer; }
.wk-emoji button:hover { background: var(--wk-soft); }
.wk-emoji button.none { grid-column: span 2; font-size: .75rem; color: var(--ink-3); }
.wk-cover-prev { display: flex; align-items: center; gap: 12px; }
.wk-cover-prev img { width: 180px; height: 70px; object-fit: cover; border-radius: 8px; }
.wk-toolbar { display: flex; flex-wrap: wrap; gap: 6px; }
.wk-tool { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 8px; background: rgb(255 255 255 / .05); color: var(--wk-ink-2); font: 700 .78rem/1 var(--font, system-ui); cursor: pointer;
  transition: background var(--mv-dur-fast) var(--mv-ease-out), color var(--mv-dur-fast) var(--mv-ease-out); }
.wk-tool:hover { background: var(--wk-soft); color: #fff; }
.wk-tool .icon { width: 14px; height: 14px; }
.wk-text { min-height: 420px; font: 400 .92rem/1.6 var(--mono, ui-monospace, monospace); resize: vertical; }
.wk-ed-preview { position: sticky; top: calc(var(--header-h, 64px) + 16px); max-height: calc(100vh - var(--header-h, 64px) - 32px); overflow-y: auto; padding: 22px; border-radius: 14px;
  background: var(--bg-1, #101216); box-shadow: inset 0 0 0 1px var(--wk-line); }
@media (max-width: 1100px) { .wk-ed-preview { position: static; max-height: none; } }
.wk-ed-label { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }

/* history and manage dialogs */
.wk-hist-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; min-height: 320px; }
@media (max-width: 700px) { .wk-hist-grid { grid-template-columns: minmax(0, 1fr); } }
.wk-hist-list { display: grid; align-content: start; gap: 4px; max-height: 420px; overflow-y: auto; }
.wk-hist-item { display: grid; gap: 2px; text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: rgb(255 255 255 / .04); color: inherit; cursor: pointer; }
.wk-hist-item small { color: var(--ink-3); }
.wk-hist-item.on, .wk-hist-item:hover { background: var(--wk-soft); }
.wk-hist-prev { max-height: 420px; overflow-y: auto; padding: 12px 16px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--wk-line); }
.wk-area-rows { display: grid; gap: 8px; }
.wk-area-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 48px auto auto; gap: 8px; align-items: center; }
.wk-area-row input[type="color"] { width: 48px; height: 38px; padding: 2px; }
.wk-order { display: grid; gap: 4px; max-height: 360px; overflow-y: auto; }
.wk-order-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px calc(8px + var(--d, 0) * 22px); border-radius: 8px; background: rgb(255 255 255 / .03); }
.wk-order-row .icon-btn { width: 30px; height: 30px; }
.wk-stat-list { display: grid; gap: 4px; }
.wk-stat-list a { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 8px; background: rgb(255 255 255 / .03); color: inherit; text-decoration: none; }

@media (prefers-reduced-motion: reduce) { .wk-card, .wk-card:hover, .wk-card-ic, .wk-twist { transition: none; transform: none; } }

/* ---------- 7.33.0: the start page of the wiki – banner, "First steps", game modes, navigation and support ---------- */
.wk-home-link { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 10px; border-radius: 10px; color: var(--wk-ink-2); font-weight: 800; font-size: .88rem; text-decoration: none; }
.wk-home-link:hover { color: var(--wk-ink); background: rgb(255 255 255 / .05); text-decoration: none; }
.wk-home-link[aria-current="page"] { color: var(--wk-ink); background: var(--wk-soft); box-shadow: inset 3px 0 0 var(--wk); }
.wk-hero { position: relative; display: flex; align-items: flex-end; min-height: 230px; padding: 26px; border-radius: 18px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, rgb(0 0 0 / 0) 30%, rgb(10 8 9 / .82)), url(/brand/home-night?w=1600) center 55% / cover no-repeat;
  box-shadow: inset 0 0 0 1px var(--wk-line), 0 18px 40px -22px rgb(0 0 0 / .9); }
.wk-hero.own { background: linear-gradient(180deg, rgb(0 0 0 / 0) 30%, rgb(10 8 9 / .82)), var(--hero) center / cover no-repeat; }
.wk-hero::before { content: ""; position: absolute; inset: auto 0 0; height: 4px; z-index: 1; background: linear-gradient(90deg, var(--emerald, #4bde6e), var(--diamond, #5ad8e6), var(--amethyst, #9a6ad6)); }
.wk-hero-in { display: flex; align-items: center; gap: 18px; }
.wk-hero-logo { width: 88px; height: 88px; object-fit: contain; filter: drop-shadow(0 10px 18px rgb(0 0 0 / .65)); }
.wk-hero h1 { margin: 2px 0 0; font-size: clamp(1.7rem, 4vw, 2.5rem); color: #fff; text-shadow: 0 3px 14px rgb(0 0 0 / .7); }
.wk-kicker { display: inline-block; font: 900 .72rem/1 var(--font, system-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--wk); }
.wk-hero .wk-kicker { color: var(--gold, #f2b440); }
.wk-welcome { margin: 22px 0 6px; text-align: center; font-size: 1.08rem; font-weight: 700; color: var(--wk-ink); }
.wk-home-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0 0; }
.wk-home-sec { margin-top: 30px; }
.wk-home-sec > h2.wk-h { margin-top: 6px; }
.wk-home-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 30px; }
.wk-home-boxes .wk-box { margin: 0; }
.wk-home-boxes .wk-box p { margin: 0 0 10px; color: var(--wk-ink-2); }
.wk-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.wk-recent li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 10px; background: rgb(255 255 255 / .02); box-shadow: inset 0 0 0 1px var(--wk-line); }
.wk-recent a { display: inline-flex; gap: 8px; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }

/* game modes: a picture on top, the name, a short text, how to join */
.wk-modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin: 0 0 1.4em; }
.wk-mode-wrap { display: grid; gap: 6px; align-content: start; }
.wk-mode { display: grid; grid-template-rows: auto 1fr; border-radius: 14px; overflow: hidden; color: var(--wk-ink); text-decoration: none; background: var(--wk-card);
  box-shadow: inset 0 0 0 1px var(--wk-line), 0 6px 0 rgb(0 0 0 / .25); transition: transform var(--mv-dur-fast) var(--mv-ease-out), box-shadow var(--mv-dur-fast) var(--mv-ease-out); }
a.wk-mode:hover { transform: translateY(-3px); text-decoration: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mc, var(--wk)) 55%, transparent), 0 12px 26px -12px color-mix(in srgb, var(--mc, var(--wk)) 55%, transparent); }
.wk-mode-pic { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: linear-gradient(135deg, color-mix(in srgb, var(--mc, var(--wk)) 55%, #150d10), #150d10); }
.wk-mode-pic img { width: 100%; height: 100%; object-fit: cover; }
.wk-mode-ic { font-size: 3rem; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .5)); }
.wk-mode-badge { position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 999px; font: 900 .68rem/1 var(--font, system-ui); letter-spacing: .06em; text-transform: uppercase; color: #150d10; background: var(--emerald, #4bde6e); }
.wk-mode-badge.soon { background: var(--gold, #f2b440); }
.wk-mode-badge.beta { background: var(--diamond, #5ad8e6); }
.wk-mode-body { display: grid; gap: 6px; align-content: start; padding: 14px 16px 16px; border-top: 3px solid var(--mc, var(--wk)); }
.wk-mode-name { font-size: 1.05rem; font-weight: 900; }
.wk-mode-text { color: var(--wk-ink-2); font-size: .9rem; }
.wk-mode-join { justify-self: start; padding: 3px 8px; border-radius: 6px; font-size: .8rem; background: rgb(0 0 0 / .3); box-shadow: inset 0 0 0 1px var(--wk-line); }
.wk-mode-video summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 800; font-size: .85rem; color: var(--wk-ink-2); }
.wk-mode-video summary .icon { width: 14px; height: 14px; }
.wk-mode-video[open] summary { margin-bottom: 8px; color: var(--wk-ink); }

/* videos: a play button in the portal's look; YouTube loads only after the click */
.wk-video { margin: 0 0 1.4em; }
.wk-video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #0c0809; box-shadow: inset 0 0 0 1px var(--wk-line), 0 14px 30px -18px rgb(0 0 0 / .9); }
.wk-video-frame iframe, .wk-video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.wk-video-play { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 16px; border: 0; cursor: pointer; color: #fff; text-align: center;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--wk) 22%, transparent), transparent 60%), linear-gradient(160deg, #241a1d, #0c0809); font: inherit; }
.wk-video-btn { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; color: #150d10; background: var(--wk); box-shadow: 0 10px 28px -6px color-mix(in srgb, var(--wk) 70%, transparent);
  transition: transform var(--mv-dur-fast) var(--mv-ease-spring); }
.wk-video-btn .icon { width: 26px; height: 26px; margin-left: 4px; }
.wk-video-play:hover .wk-video-btn, .wk-video-play:focus-visible .wk-video-btn { transform: scale(1.08); }
.wk-video-play:focus-visible { outline: 3px solid var(--wk); outline-offset: -3px; }
.wk-video-t { font-weight: 900; font-size: 1.05rem; }
.wk-video-note { color: rgb(255 255 255 / .72); font-size: .78rem; }
.wk-video-cap { margin-top: 8px; text-align: center; color: var(--wk-ink-2); font-size: .88rem; }
@media (prefers-reduced-motion: reduce) { .wk-video-btn, .wk-mode { transition: none; } a.wk-mode:hover { transform: none; } }

/* the editors of the start page and the game modes */
.wk-start-row { display: grid; grid-template-columns: 56px 1fr 1.2fr 1.3fr auto auto; gap: 6px; align-items: center; }
.wk-mode-rows { display: grid; gap: 14px; }
.wk-mode-row { display: grid; gap: 10px; padding: 14px; border-radius: 12px; background: rgb(255 255 255 / .03); box-shadow: inset 0 0 0 1px var(--wk-line); }
@media (max-width: 640px) {
  .wk-hero { min-height: 170px; padding: 18px; } .wk-hero-logo { width: 60px; height: 60px; }
  .wk-start-row { grid-template-columns: 52px 1fr; } .wk-start-row > select, .wk-start-row > input:nth-child(4) { grid-column: 1 / -1; }
}