/* Mechanical Keyboarding, inside the Elbe Labs frame, dressed as the game's own menus: the
   title in Alfa Slab One with its brass face and iron extrusion, the menus in Balsamiq Sans,
   the typed line in Georgia, every window in the walnut 9-slice frame with brass rivets (a
   pixel-for-pixel port of the game's js/chrome.js, img/mk/ui/mk-frame.png), the brass caret
   beside whatever has focus, the language and layout switches, and the screen keyboard's
   keycaps tinted by finger. Colours are the game's css/style.css tokens. */

@font-face { font-family: "Alfa Slab One"; font-weight: 400; font-display: swap; src: url("../fonts/alfa-slab-one-latin.woff2") format("woff2"); }
@font-face { font-family: "Balsamiq Sans"; font-weight: 400; font-display: swap; src: url("../fonts/balsamiq-sans-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Balsamiq Sans"; font-weight: 400; font-display: swap; src: url("../fonts/balsamiq-sans-400-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Balsamiq Sans"; font-weight: 700; font-display: swap; src: url("../fonts/balsamiq-sans-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Balsamiq Sans"; font-weight: 700; font-display: swap; src: url("../fonts/balsamiq-sans-700-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

.mk {
  --bg: #131a22; --bg-raised: #1a232d; --bg-card: rgba(23, 31, 41, 0.94);
  --ink: #ece2cc; --ink-dim: #98a3b3; --brass: #d4a94e; --brass-dim: #8a743f;
  --hl: #f3e9d2; --panel-line: #33404f; --wood-lo: #3d2414;
  --ok: #7fb98a; --err: #d4685e; --hint: #e8c877;
  --finger-2: #1e2a22; --finger-3: #14282f; --finger-4: #1d2333; --finger-5: #262029;
  --tsh: 2px 2px 0 #000, 0 0 12px rgba(0, 0, 0, 0.9);
  --slab: "Alfa Slab One", Georgia, serif;
  --ui: "Balsamiq Sans", "Trebuchet MS", sans-serif;
  --line: Georgia, "Times New Roman", serif;
  --frame: url("../img/mk/ui/mk-frame.png");
  background: var(--bg);
  color: var(--ink);
  font: 400 18px/1.65 var(--ui);
}
.mk a { color: var(--hint); }
.mk a:hover { color: var(--hl); }
.mk ::selection { background: rgba(212, 169, 78, 0.45); color: #fff; }

/* ---------------------------------------------------------------- the game's furniture */

/* every window: the walnut frame, its fill the panel colour, hard edges */
.mk-win { border: 24px solid transparent; border-image: var(--frame) 24 fill round; image-rendering: pixelated; padding: 6px 12px 10px; }
.mk-win > * { image-rendering: auto; }
.mk-win--tight { padding: 0; }

/* the title: brass face, iron extrusion */
.mk-logo { margin: 0; font: 400 clamp(42px, 8.4vw, 96px)/1 var(--slab); letter-spacing: 3px; color: var(--brass); text-transform: uppercase;
  text-shadow: 1px 1px 0 #f7dc8e, 3px 3px 0 var(--brass-dim), 5px 5px 0 var(--brass-dim), 7px 7px 0 #1a1208, 9px 9px 0 #1a1208, 0 0 30px rgba(0, 0, 0, 0.7); }
.mk-logo small { display: block; margin-top: 10px; color: var(--ink); font-size: 0.46em; letter-spacing: 8px; padding-left: 8px;
  text-shadow: 3px 3px 0 #1a1208, 5px 5px 0 #1a1208, 0 0 30px rgba(0, 0, 0, 0.7); }
.mk-h2 { margin: 0 0 18px; font: 400 clamp(30px, 4.4vw, 50px)/1.08 var(--slab); letter-spacing: 1px; color: var(--brass);
  text-shadow: 1px 1px 0 #f7dc8e, 2px 2px 0 var(--brass-dim), 3px 3px 0 var(--brass-dim), 4px 4px 0 #1a1208, 5px 5px 0 #1a1208, 0 0 20px rgba(0, 0, 0, 0.6); }
.mk-kicker { margin: 0 0 12px; color: var(--ink-dim); font: 700 14px/1 var(--ui); letter-spacing: 3px; text-transform: uppercase; text-shadow: var(--tsh); }
.mk-help { color: var(--ink-dim); font-size: 16px; text-shadow: var(--tsh); }
.mk-help b { color: var(--ink); }

/* the brass caret that sits beside whatever has focus */
.mk-caret { position: relative; }
.mk-caret::before {
  content: ""; position: absolute; left: -34px; top: 50%; width: 24px; height: 33px; margin-top: -16px;
  background: url("../img/mk/ui/mk-cursor.png") 0 0 / 24px 33px no-repeat; image-rendering: pixelated;
  opacity: 0; transform: translateX(-4px); transition: opacity 0.15s ease, transform 0.15s ease;
}
.mk-caret.is-focus::before, .mk-caret:hover::before, .mk-caret:focus-within::before { opacity: 1; transform: none; animation: mk-nudge 1.1s ease-in-out infinite; }
.mk-carets:hover .mk-caret.is-focus:not(:hover)::before { opacity: 0; animation: none; }
@keyframes mk-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }

/* keycaps, as the screen keyboard draws them */
.mk-key {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border-radius: 6px; background: var(--bg-raised); color: var(--ink); box-shadow: 0 4px 0 #0b1016;
  font: 700 18px/1 var(--ui); text-decoration: none; text-shadow: none;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.15s ease;
}
.mk a.mk-key { color: var(--ink); }
.mk-key:hover { background: #22303c; color: var(--hl); }
.mk-key:active { transform: translateY(3px); box-shadow: 0 1px 0 #0b1016; }
/* the hint key: the one to press next glows */
.mk-key--hint { background: var(--hint); color: #1a1508; box-shadow: 0 4px 0 #6f5a22, 0 0 18px rgba(232, 200, 119, 0.7); }
.mk a.mk-key--hint { color: #1a1508; }
.mk-key--hint:hover { background: #f0d48c; color: #1a1508; }
.mk-key kbd { padding: 3px 7px; border-radius: 4px; background: rgba(0, 0, 0, 0.18); font: 700 12px/1 var(--ui); letter-spacing: 0.04em; }

/* the loading card's three cells */
.mk-cells { display: flex; justify-content: center; gap: 6px; }
.mk-cells i { position: relative; width: 22px; height: 10px; background: var(--brass-dim); animation: mk-lift 1.1s ease-in-out infinite; }
.mk-cells i::after { content: ""; position: absolute; inset: 0; background: #ffd77a; box-shadow: 0 0 10px rgba(255, 215, 122, 0.55); opacity: 0.1; animation: mk-fade 1.1s ease-in-out infinite; }
.mk-cells i:nth-child(2), .mk-cells i:nth-child(2)::after { animation-delay: 0.18s; }
.mk-cells i:nth-child(3), .mk-cells i:nth-child(3)::after { animation-delay: 0.36s; }
@keyframes mk-lift { 0%, 100% { transform: scaleY(0.6); } 50% { transform: scaleY(1); } }
@keyframes mk-fade { 0%, 100% { opacity: 0.1; } 50% { opacity: 1; } }

/* ---------------------------------------------------------------- the title screen, as a hero */

.mk-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(40px, 7vw, 84px) 0 clamp(44px, 6vw, 72px); text-align: center; }
.mk-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; image-rendering: pixelated; }
.mk-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 70% 60% at 50% 42%, rgba(6, 12, 16, 0.5), rgba(6, 12, 16, 0.85) 80%), linear-gradient(to bottom, rgba(19, 26, 34, 0) 75%, var(--bg) 100%); }
.mk-hero__sub { margin: 18px 0 0; font-size: 19px; letter-spacing: 1px; text-shadow: var(--tsh); }
.mk-hero__lead { max-width: 36em; margin: 12px auto 0; color: var(--hl); font: 400 clamp(17px, 1.8vw, 20px)/1.6 var(--line); text-shadow: var(--tsh); }

/* the title's switches: language and layout, each a row of bordered buttons */
.mk-switches { display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: 10px 14px; margin: 28px auto 0; text-align: left; }
.mk-switches .label { color: var(--ink-dim); font-size: 15px; justify-self: end; }
.mk-switches .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mk-sw {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px;
  border: 2px solid var(--panel-line); border-radius: 3px; background: rgba(10, 15, 20, 0.6); color: var(--ink-dim);
  font: 700 15px/1 var(--ui); letter-spacing: 1px; cursor: pointer;
}
.mk-sw img { width: 26px; height: auto; display: block; }
.mk-sw[aria-pressed="true"], .mk-sw.is-on { border-color: var(--hl); color: var(--hl); }
.mk-sw:hover { color: var(--hl); }
.mk-sw--more { border-style: dashed; cursor: default; opacity: 0.75; }
.mk-hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 30px; }
.mk-hero .mk-cells { margin-top: 30px; }

/* ---------------------------------------------------------------- sections */

.mk-section { padding: clamp(60px, 8vw, 100px) 0; }
.mk-section + .mk-section { padding-top: 0; }

.mk-intro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.mk-intro p { margin: 0 0 14px; }
.mk-intro .mk-lead { color: var(--hl); font: 400 clamp(19px, 1.8vw, 21px)/1.6 var(--line); }
.mk-facts { margin: 0; }
.mk-facts div { display: grid; grid-template-columns: 104px 1fr; gap: 12px; padding: 8px 0; border-bottom: 2px solid var(--panel-line); }
.mk-facts div:last-child { border-bottom: 0; }
.mk-facts dt { color: var(--ink-dim); font-size: 15px; }
.mk-facts dd { margin: 0; color: var(--ink); }
.mk-facts .more { display: block; color: var(--hint); font-size: 14px; }
@media (max-width: 860px) { .mk-intro { grid-template-columns: 1fr; } }

.mk-video { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #0a0f14; }
.mk-video > img, .mk-video > video, .mk-video > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.mk-video > img { image-rendering: pixelated; }
.mk-video__soon { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(6, 12, 16, 0.62); text-align: center; }
.mk-video__soon .mk-h2 { margin: 0 0 18px; font-size: clamp(24px, 3.4vw, 40px); }

/* the drill: the typed line in Georgia over the screen keyboard */
.mk-drill { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
.mk-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.mk-steps li { padding-left: 4px; }
.mk-steps h3 { margin: 0 0 4px; color: var(--hl); font: 700 20px/1.3 var(--ui); }
.mk-steps p { margin: 0; color: var(--ink); font-size: 17px; }
.mk-line { margin: 0 0 18px; padding: 10px 0 12px; text-align: center; font: 400 clamp(22px, 2.6vw, 30px)/1.3 var(--line); letter-spacing: 1px; color: var(--ink-dim); border-bottom: 2px solid var(--panel-line); }
.mk-line .ok { color: var(--ok); }
.mk-line .now { color: var(--hl); text-decoration: underline; text-decoration-color: var(--hint); text-decoration-thickness: 3px; text-underline-offset: 7px; }
.mk-line-gloss { margin: -8px 0 18px; text-align: center; color: var(--ink-dim); font-size: 14px; }
.mk-kb { display: grid; gap: 6px; }
.mk-kb .r { display: flex; justify-content: center; gap: 6px; }
.mk-kb .r:nth-child(2) { padding-left: 18px; }
.mk-kb .r:nth-child(3) { padding-left: 36px; }
.mk-kb span {
  position: relative; display: grid; place-items: center; width: clamp(26px, 3.6vw, 42px); height: clamp(30px, 3.6vw, 42px);
  border-radius: 6px; background: var(--bg-raised); color: var(--ink); font: 400 clamp(13px, 1.4vw, 16px)/1 Arial, sans-serif;
}
.mk-kb span::after { content: attr(data-en); }
.mk-kb[data-layout="ru"] span::after { content: attr(data-ru); }
.mk-kb .f2 { background: var(--finger-2); } .mk-kb .f3 { background: var(--finger-3); }
.mk-kb .f4 { background: var(--finger-4); } .mk-kb .f5 { background: var(--finger-5); }
.mk-kb .home::before { content: ""; position: absolute; bottom: 5px; width: 10px; height: 2px; border-radius: 1px; background: #3d545e; }
.mk-kb .hint { color: #1a1508; background: var(--hint); box-shadow: 0 0 18px rgba(232, 200, 119, 0.7); }
.mk-kb .space { width: clamp(150px, 22vw, 240px); }
.mk-kb .space::after { content: ""; }
@media (max-width: 900px) { .mk-drill { grid-template-columns: 1fr; } }

/* the worlds, as the title shows them: a framed window each, the caret by the focused one */
.mk-worlds { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; gap: clamp(40px, 6vw, 72px); margin: 0; padding: 0 0 0 30px; list-style: none; }
.mk-world { text-align: center; }
.mk-world .thumb { display: grid; place-items: center; height: 120px; background: #0c1116; border: 2px solid var(--panel-line); }
/* the maps are tiny pixel drawings (120x60, 178x29): blow them up with hard pixels */
.mk-world .thumb img { width: 92%; height: 100px; object-fit: contain; image-rendering: pixelated; }
.mk-world h3 { margin: 10px 0 2px; color: var(--hl); font: 700 22px/1.2 var(--line); }
.mk-world p { margin: 0; color: var(--ink-dim); font-size: 15.5px; line-height: 1.45; }
@media (max-width: 760px) { .mk-worlds { grid-template-columns: minmax(0, 360px); padding-left: 30px; } }

/* the pause menu's list: the rows, and the help line under a rule */
.mk-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 36px; margin: 0; padding: 0 0 0 34px; list-style: none; }
.mk-menu li { padding: 12px 0; border-bottom: 2px solid var(--panel-line); }
.mk-menu h3 { margin: 0 0 4px; color: var(--hl); font: 700 20px/1.3 var(--ui); }
.mk-menu p { margin: 0; font-size: 16.5px; }
.mk-menu-help { margin: 16px 0 0; text-align: center; }
@media (max-width: 820px) { .mk-menu { grid-template-columns: 1fr; } }

.mk-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin: 0; padding: 0; list-style: none; }
.mk-gallery a { display: block; overflow: hidden; }
.mk-gallery img { display: block; width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: 50% 0; image-rendering: pixelated; transition: transform 0.4s ease; }
.mk-gallery a:hover img { transform: scale(1.03); }
.mk-gallery .cap { display: block; margin-top: 10px; color: var(--ink-dim); font-size: 16px; text-shadow: var(--tsh); }
@media (max-width: 760px) { .mk-gallery { grid-template-columns: 1fr; } }

.mk-stores { display: grid; grid-template-columns: repeat(2, minmax(0, 320px)); justify-content: center; gap: clamp(36px, 5vw, 64px); margin: 0 0 18px; padding: 0 0 0 30px; list-style: none; }
.mk-store { text-align: center; }
.mk-store strong { display: block; margin: 6px 0 4px; color: var(--hl); font: 400 26px/1.1 var(--slab); letter-spacing: 1px; text-shadow: 2px 2px 0 #1a1208; }
.mk-store small { display: block; color: var(--ink-dim); font-size: 15px; }
.mk-store a { text-decoration: none; }
.mk-note { margin: 0; text-align: center; color: var(--ink-dim); font-size: 16px; text-shadow: var(--tsh); }
@media (max-width: 700px) { .mk-stores { grid-template-columns: minmax(0, 340px); } }

@media (prefers-reduced-motion: reduce) {
  .mk-cells i, .mk-cells i::after, .mk-caret::before { animation: none !important; }
  .mk-cells i::after { opacity: 1; }
}

/* the example line follows the example keyboard's layout */
#mk-drill[data-layout="en"] .lang-ru, #mk-drill[data-layout="ru"] .lang-en { display: none; }