/* MinecraftEnchantments
   The tool is drawn with Minecraft's own GUI: container windows, slots, buttons, the anvil row and the
   enchanting table's option rows, lettered in the game's bitmap font (generated from the jar).
   The page is an enchanted library: bookshelf walls at the top and bottom of every page, warm parchment
   between them, and reading text on book-page cards with a brown leather trim, lit by candle light.
   1 GUI pixel = 2 CSS pixels (--g). Minecraft text sizes are multiples of 8px so pixels stay square. */

@font-face { font-family: 'Minecraft Game'; src: url(/assets/fonts/minecraft.woff2) format('woff2'), url(/assets/fonts/minecraft.otf) format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Minecraft Game'; src: url(/assets/fonts/minecraft-bold.woff2) format('woff2'), url(/assets/fonts/minecraft-bold.otf) format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Minecraft Galactic'; src: url(/assets/fonts/galactic.woff2) format('woff2'), url(/assets/fonts/galactic.otf) format('opentype'); font-display: swap; }

:root {
  --g: 2px;
  /* inventory slots: the game's 18px slot at 2.2× so items read 10% bigger than plain 2× */
  --slot: calc(20 * var(--g));
  --item: calc(17.5 * var(--g));
  --mc: 'Minecraft Game', ui-monospace, monospace;
  --serif: 'Literata', Georgia, serif;
  /* library page: wood outside, book paper inside */
  --ink: #9c7a4b;
  --ink-2: #fffaf0;
  --sheet: #f6ecd2;
  --sheet-edge: #5a3a1e;
  --rule: #dcc89d;
  --paper: #2b1d10;
  --paper-dim: #5b4630;
  --paper-faint: #8a7356;
  --link: #1f4fb8;
  --link-hover: #0f2f78;
  --accent: #a3560b;
  --trim: #5a3a1e;
  --shelf-shade: rgba(24, 14, 6, 0.72);
  --ok: #2e7d00;
  --bad: #c62828;
  --head-shadow: #dcc9a0;
  --board-text: #f7eedc;
  /* game palette */
  --gui: #c6c6c6;
  --gui-text: #404040;
  --white: #ffffff;
  --shadow: #3f3f3f;
  --yellow: #ffff55;
  --gold: #ffaa00;
  --green: #80ff20;
  --green-shadow: #203f08;
  --red: #ff6060;
  --aqua: #55ffff;
  --tan-text: #2e271c;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--paper); font: 18px/1.65 var(--serif); overflow-x: hidden; background: #9cc6f5; }
img { image-rendering: pixelated; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: var(--g) solid var(--link); outline-offset: var(--g); }
.wrap { width: min(1240px, 100% - 32px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button { font: inherit; color: inherit; }

/* Minecraft lettering for headings: dark ink with a soft one-pixel shadow (the game's drop shadow, inverted for paper) */
.mc, .mc-h { font-family: var(--mc); font-weight: 400; letter-spacing: 0; -webkit-font-smoothing: none; font-smooth: never; font-synthesis: none; }
.mc-h { color: var(--paper); text-shadow: calc(var(--fpx, 2px)) calc(var(--fpx, 2px)) 0 var(--head-shadow); line-height: 1.25; margin: 0 0 0.6em; }
h1.mc-h { font-size: 40px; --fpx: 5px; font-weight: 700; }
h2.mc-h { font-size: 32px; --fpx: 4px; }
h3.mc-h { font-size: 24px; --fpx: 3px; }
.mc-label { font: 16px/20px var(--mc); color: var(--gui-text); -webkit-font-smoothing: none; margin: 0; }

/* --- header ---------------------------------------------------------------------------------------- */
.top { position: sticky; top: 0; z-index: 40; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); background: linear-gradient(180deg, rgba(24, 14, 6, 0.86), rgba(24, 14, 6, 0.6)); box-shadow: 0 2px 0 rgba(255, 220, 150, 0.15); }
.top .wrap { display: flex; align-items: center; gap: 22px; min-height: 72px; padding: 8px 0 12px; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; font: 16px/18px var(--mc); color: #fff; text-shadow: 2px 2px 0 #3f2a12; -webkit-font-smoothing: none; }
.logo:hover { color: #ffff55; }
.logo .ico { width: 32px; height: 32px; }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a { font: 16px var(--mc); color: var(--board-text); text-decoration: none; padding: 4px 0; text-shadow: 2px 2px 0 #3f2a12; -webkit-font-smoothing: none; }
.nav a:hover, .nav a[aria-current] { color: #ffff55; text-shadow: 2px 2px 0 #3f3f15; }
/* the edition switch: two game buttons, the current edition pressed in */
.edition { display: flex; gap: 4px; padding: 4px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.4), inset -2px -2px 0 rgba(255, 255, 255, 0.12); }
.edition a { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 8px; border: 6px solid transparent; border-image: url(/assets/minecraft/textures/gui/button.png) 3 fill / 6px stretch; font: 16px var(--mc); color: #fff; text-shadow: 2px 2px 0 #3f3f3f; text-decoration: none; -webkit-font-smoothing: none; }
.edition a:hover { border-image-source: url(/assets/minecraft/textures/gui/button_hover.png); color: #ffffa0; }
.edition a[aria-current] { border-image-source: url(/assets/minecraft/textures/gui/button_hover.png); color: #ffff55; box-shadow: 0 0 0 2px #ffff55; }
.edition .ed-ico { width: 24px; height: 24px; }
.menu-btn.btn, #nav-toggle { display: none; }

/* --- hero: an enchanting room built from block textures -------------------------------------------- */
.hero { position: relative; overflow: hidden; box-shadow: inset 0 -4px 0 #2b1d10; }
.hero-shelves { position: absolute; inset: 0; background: url(/assets/minecraft/textures/bookshelf.png) 0 0 / 96px 96px; image-rendering: pixelated; }
.hero-shelves::after { content: ''; position: absolute; inset: 0; background: radial-gradient(420px 300px at 78% 55%, rgba(255, 196, 110, 0.28), transparent 70%), linear-gradient(180deg, rgba(30, 18, 8, 0.1), rgba(30, 18, 8, 0.35)); }
.hero .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: center; gap: 32px; padding: 40px 0 44px; }
/* the hero text sits on a book page in the library */
.hero-text { background: var(--sheet); color: #2b1d10; box-shadow: 0 0 0 4px var(--sheet-edge), inset 0 0 0 3px #fffaf0, inset 0 0 0 6px #e8d8b0, 6px 8px 0 4px rgba(30, 18, 8, 0.28); padding: 26px 30px 24px; margin: 4px; max-width: 700px; }
/* reading surfaces below: book pages with a leather trim */
.card, .prose section, .content > .tscroll, .tool-list a, .sga-chart span { background: #fbf4e2; color: var(--paper); box-shadow: 0 0 0 4px var(--trim), inset 0 0 0 3px #fffaf0, inset 0 0 0 6px #ead9b3, 6px 8px 0 4px rgba(60, 36, 12, 0.22); }
.hero h1 { margin-bottom: 18px; }
.hero .lead { max-width: 600px; color: var(--paper); font-size: 20px; margin: 0 0 22px; }
.hero .lead b { font-weight: 600; color: var(--paper); }
.stamp { display: inline-flex; flex-wrap: wrap; gap: 6px 22px; font: 16px var(--mc); color: var(--paper-dim); -webkit-font-smoothing: none; }
.stamp span { color: var(--ok); }
.table-scene { position: relative; height: 260px; display: grid; place-items: center; }
/* the enchanting table is 16 wide and 12 tall: a 128 × 96 × 128 box */
.cube { position: relative; width: 128px; height: 96px; margin-top: 70px; transform-style: preserve-3d; transform: rotateX(-30deg) rotateY(-45deg); }
.cube i { position: absolute; left: 0; top: 0; width: 128px; height: 96px; image-rendering: pixelated; backface-visibility: hidden; }
.cube .f-top { top: -16px; height: 128px; background: url(/assets/minecraft/textures/enchanting_table_top.png) 0 0 / 100% 100%; transform: rotateX(90deg) translateZ(48px); }
.cube .f-front { background: url(/assets/minecraft/textures/enchanting_table_side.png) 0 100% / 128px 128px; transform: translateZ(64px); filter: brightness(0.82); }
.cube .f-side { background: url(/assets/minecraft/textures/enchanting_table_side.png) 0 100% / 128px 128px; transform: rotateY(90deg) translateZ(64px); filter: brightness(0.62); }
.float-book { position: absolute; left: 50%; top: 22px; translate: -50% 0; animation: bob 4s ease-in-out infinite; }
.float-book .ico { width: 64px; height: 64px; }
@keyframes bob { 50% { transform: translateY(-10px); } }
.glyphs { position: absolute; inset: 0; pointer-events: none; }
.glyphs span { position: absolute; font: 16px 'Minecraft Galactic'; color: #fff; opacity: 0; animation: glyph 4.6s linear infinite; text-shadow: 0 0 6px #ffe2a8, 2px 2px 0 #3f3f3f; }
@keyframes glyph { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 85% { opacity: 0.9; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }

/* --- pixel icons + glint --------------------------------------------------------------------------- */
.ico { position: relative; display: inline-block; flex: none; width: 32px; height: 32px; }
.ico img { display: block; width: 100%; height: 100%; object-fit: contain; }
.glint { -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; overflow: hidden; }
.glint::after { content: ''; position: absolute; left: -200%; top: -200%; width: 300%; height: 300%; pointer-events: none;
  background: url(/assets/minecraft/textures/glint.png) 0 0 / 256px 256px; mix-blend-mode: plus-lighter; opacity: 0.55; will-change: transform; animation: glint 9s linear infinite; }
@keyframes glint { to { transform: translate(66.66%, 22%); } }
@media (prefers-reduced-motion: reduce) { .glint::after, .float-book, .glyphs span { animation: none; } .glyphs { display: none; } }

/* --- GUI pieces ------------------------------------------------------------------------------------ */
.win { position: relative; border: calc(4 * var(--g)) solid transparent; border-image: url(/assets/minecraft/textures/gui/window.png) 4 fill / calc(4 * var(--g)) stretch; padding: calc(3 * var(--g)) calc(4 * var(--g)) calc(5 * var(--g)); color: var(--gui-text); image-rendering: pixelated; }
.win + .win { margin-top: 20px; }
.win-h { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font: 16px/20px var(--mc); color: var(--gui-text); -webkit-font-smoothing: none; }
.win-h .aside { margin-left: auto; color: #6b6b6b; }
.win-h img { width: 30px; height: 30px; }
.win-sub { font: 16px/20px var(--mc); color: var(--gui-text); margin: 18px 0 8px; -webkit-font-smoothing: none; }

.slot { position: relative; display: inline-grid; place-items: center; width: var(--slot); height: var(--slot); padding: 0; border: 0; background: url(/assets/minecraft/textures/gui/slot.png) 0 0 / 100% 100%; flex: none; }
.slot .ico { width: var(--item); height: var(--item); }
button.slot { cursor: pointer; }
button.slot:hover::before, .slot.on::before, .slot[data-tip]:hover::before { content: ''; position: absolute; inset: var(--g); background: rgba(255, 255, 255, 0.5); z-index: 1; }
.slot.on::after { content: ''; position: absolute; inset: calc(-1 * var(--g)); border: var(--g) solid #fff; z-index: 2; pointer-events: none; }
.slots { display: flex; flex-wrap: wrap; gap: 0; }
.picked { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 14px; }
.picked .mc-label { min-width: 150px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: calc(20 * var(--g)); padding: 0 calc(8 * var(--g)); border: calc(3 * var(--g)) solid transparent; border-image: url(/assets/minecraft/textures/gui/button.png) 3 fill / calc(3 * var(--g)) stretch; font: 16px var(--mc); color: var(--white); text-shadow: 2px 2px 0 var(--shadow); cursor: pointer; text-decoration: none; white-space: nowrap; -webkit-font-smoothing: none; background: none; }
.btn:hover, .btn:focus-visible, .btn[aria-pressed='true'] { border-image-source: url(/assets/minecraft/textures/gui/button_hover.png); color: #ffffa0; text-shadow: 2px 2px 0 #3f3f28; }
.btn[aria-pressed='true'] { color: var(--yellow); }
.btn:disabled { border-image-source: url(/assets/minecraft/textures/gui/button_disabled.png); color: #a0a0a0; text-shadow: none; cursor: default; }
.btns { display: flex; flex-wrap: wrap; gap: 6px; }

.check { display: flex; align-items: center; gap: 12px; cursor: pointer; font: 16px/20px var(--mc); color: var(--gui-text); -webkit-font-smoothing: none; }
.check input { appearance: none; width: calc(20 * var(--g)); height: calc(20 * var(--g)); margin: 0; background: url(/assets/minecraft/textures/gui/checkbox.png) 0 0 / 100% 100%; cursor: pointer; flex: none; image-rendering: pixelated; }
.check input:hover { background-image: url(/assets/minecraft/textures/gui/checkbox_hover.png); }
.check input:checked { background-image: url(/assets/minecraft/textures/gui/checkbox_on.png); }
.check input:checked:hover { background-image: url(/assets/minecraft/textures/gui/checkbox_on_hover.png); }
.check small { display: block; color: #6b6b6b; }
.stepper { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; flex-wrap: wrap; }
.stepper .btn { width: calc(20 * var(--g)); padding: 0; }
.stepper output { min-width: 40px; text-align: center; font: 16px var(--mc); color: var(--gui-text); }
.hint { font: 16px/20px var(--mc); color: #6b6b6b; margin: 6px 0 12px; -webkit-font-smoothing: none; }

/* enchanting-table option rows */
.erows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.erow { display: flex; align-items: center; gap: 8px; min-height: 48px; padding-right: 8px; border: calc(2 * var(--g)) solid transparent; border-image: url(/assets/minecraft/textures/gui/ench_row.png) 2 fill / calc(2 * var(--g)) stretch; }
.erow:hover { filter: brightness(1.06); }
.erow.on { border-image-source: url(/assets/minecraft/textures/gui/ench_row_hover.png); }
.erow.off { border-image-source: url(/assets/minecraft/textures/gui/ench_row_off.png); filter: none; }
.erow-main { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 6px; border: 0; background: none; text-align: left; cursor: pointer; }
.erow-main:disabled { cursor: not-allowed; }
.erow-text { display: flex; flex-direction: column; min-width: 0; font-family: var(--mc); -webkit-font-smoothing: none; }
.erow-text b { font-weight: 400; font-size: 16px; line-height: 20px; color: var(--tan-text); }
.erow-text small { font-size: 16px; line-height: 18px; color: #6a5c43; }
.erow.on .erow-text b { color: var(--white); text-shadow: 2px 2px 0 #5a3550; }
.erow.on .erow-text small { color: #f2d9ec; }
.erow.off .erow-text b { color: #8b7f68; }
.erow.off .erow-text small { color: #ff9f9f; }
.erow.curse.on { border-image-source: url(/assets/minecraft/textures/gui/ench_row_off.png); }
.erow.curse.on .erow-text b { color: #ff5555; text-shadow: 2px 2px 0 #3f1515; }
.lvls { display: flex; gap: 2px; }
.lvl { width: 34px; height: 30px; border: 0; background: rgba(0, 0, 0, 0.28); font: 16px var(--mc); color: #4e4433; cursor: pointer; -webkit-font-smoothing: none; }
.lvl:hover { background: rgba(0, 0, 0, 0.45); color: #ddd; }
.lvl.on { color: var(--green); text-shadow: 2px 2px 0 var(--green-shadow); background: rgba(0, 0, 0, 0.5); }
.lvl:disabled { opacity: 0.4; cursor: not-allowed; }
.curses { margin-top: 12px; }
.curses summary { cursor: pointer; margin-bottom: 8px; }

/* --- calculator layout ----------------------------------------------------------------------------- */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 28px; align-items: start; padding: 36px 0 56px; }
.res-col { position: sticky; top: 100px; max-height: calc(100vh - 116px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #555 transparent; }

/* anvil rows (the result) */
.anvil-row { display: flex; align-items: center; gap: calc(5 * var(--g)); }
.anvil-row .plus { width: calc(13 * var(--g)); height: calc(13 * var(--g)); }
.anvil-row .arrow { width: calc(22 * var(--g)); height: calc(15 * var(--g)); }
.anvil-row .arrow.err { width: calc(28 * var(--g)); height: calc(21 * var(--g)); margin: calc(-3 * var(--g)); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.step { position: relative; padding: 14px 0 14px 34px; border-top: var(--g) solid #8b8b8b; box-shadow: inset 0 var(--g) 0 #fff; }
.step-n { position: absolute; left: 0; top: 22px; font: 16px var(--mc); color: var(--gui-text); }
.cost { display: inline-block; margin: 10px 0 0; padding: 2px 6px; background: rgba(0, 0, 0, 0.31); font: 16px/20px var(--mc); color: var(--green); text-shadow: 2px 2px 0 var(--green-shadow); -webkit-font-smoothing: none; }
.cost.bad { color: var(--red); text-shadow: 2px 2px 0 #3f1818; }
.step-txt { margin: 8px 0 0; font: 14px/1.45 var(--serif); color: #4a4a4a; }
.empty { padding: 8px 0 4px; }
.empty .anvil-row { margin-bottom: 14px; opacity: 0.8; }
.total { padding-bottom: 16px; }
.xp { position: relative; padding-top: 38px; width: calc(182 * var(--g)); max-width: 100%; }
.xp-num { position: absolute; top: 0; left: 50%; translate: -50% 0; font: 32px/32px var(--mc); color: var(--green); -webkit-font-smoothing: none;
  text-shadow: 4px 0 0 #000, -4px 0 0 #000, 0 4px 0 #000, 0 -4px 0 #000; }
.total.bad .xp-num { color: var(--red); }
.xp-bar { position: relative; display: block; height: calc(5 * var(--g)); background: url(/assets/minecraft/textures/xp_bar_bg.png) 0 0 / 100% 100%; }
.xp-bar i { position: absolute; inset: 0 auto 0 0; background: url(/assets/minecraft/textures/xp_bar.png) 0 0 / calc(182 * var(--g)) 100%; }
.total .mc-label { margin-top: 12px; }
.total-note { margin: 6px 0 0; font: 15px/1.5 var(--serif); color: #4a4a4a; }
.total-note b { color: #000; }
.final { margin-top: 6px; padding-top: 16px; border-top: var(--g) solid #8b8b8b; box-shadow: inset 0 var(--g) 0 #fff; }
/* the game's edit box: black field, light grey 1px border */
.field { display: block; width: 100%; margin: 12px 0 8px; padding: 8px 10px; border: var(--g) solid #a0a0a0; box-shadow: 0 0 0 var(--g) #000; font: 16px/20px var(--mc); color: #e0e0e0; background: #000; overflow-wrap: anywhere; -webkit-font-smoothing: none; }

/* in-game tooltip, exact vanilla colours */
.mc-tip { display: inline-flex; flex-direction: column; padding: 6px 8px 4px; background: rgba(16, 0, 16, 0.94); border: 2px solid; border-image: linear-gradient(180deg, rgba(80, 0, 255, 0.55), rgba(40, 0, 127, 0.55)) 1; outline: 2px solid rgba(16, 0, 16, 0.94); font: 16px/20px var(--mc); -webkit-font-smoothing: none; white-space: nowrap; }
.mc-tip span { color: var(--c); text-shadow: 2px 2px 0 color-mix(in srgb, var(--c) 25%, #000); }
.mc-tip .t { margin-bottom: 4px; }
.tip-float { position: fixed; z-index: 50; pointer-events: none; left: 0; top: 0; }

/* --- editorial content below the tool -------------------------------------------------------------- */
.content { padding: 32px 0 72px; }
.prose { max-width: 760px; }
.prose p, .prose li { color: var(--paper); }
.prose section { margin: 4px 4px 40px; padding: 26px 30px 22px; }
.prose section > :last-child { margin-bottom: 0; }
.lede { font-size: 20px; color: var(--paper-dim); }
.formula { font: 16px/24px var(--mc); background: #1e1b17; color: #f0ece4; padding: 14px 18px; margin: 18px 0 22px; border: var(--g) solid #1e1b17; overflow-x: auto; -webkit-font-smoothing: none; }
.formula b { color: #9bff4f; font-weight: 400; }
.chain { font: 16px var(--mc); color: var(--accent); -webkit-font-smoothing: none; }
.howto { counter-reset: h; list-style: none; padding: 0; margin: 0; }
.howto li { counter-increment: h; position: relative; padding: 0 0 18px 56px; }
.howto li::before { content: counter(h); position: absolute; left: 0; top: -2px; width: 36px; height: 36px; display: grid; place-items: center; background: url(/assets/minecraft/textures/gui/slot.png) 0 0 / 100% 100%; font: 16px var(--mc); color: var(--white); text-shadow: 2px 2px 0 var(--shadow); }
.howto b { font-weight: 600; color: var(--paper); }
.tscroll { overflow-x: auto; margin: 18px 0; }
table.t { width: 100%; border-collapse: collapse; font-size: 16px; }
table.t th { font: 16px var(--mc); color: var(--paper-faint); text-align: left; padding: 8px 12px 8px 0; border-bottom: 2px solid var(--rule); -webkit-font-smoothing: none; }
table.t td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--rule); }
table.t td:not(:first-child) { font: 16px var(--mc); color: var(--paper); -webkit-font-smoothing: none; }
.faq details { border-top: 1px solid var(--rule); padding: 16px 0; }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; font-weight: 600; color: var(--paper); list-style: none; display: flex; gap: 14px; }
.faq summary::before { content: '+'; font: 16px/28px var(--mc); color: var(--accent); }
.faq details[open] summary::before { content: '-'; }
.faq details p { margin: 10px 0 0 30px; color: var(--paper-dim); }

/* --- footer ---------------------------------------------------------------------------------------- */

/* mobile total bar */
.mbar { display: none; }

/* --- responsive ------------------------------------------------------------------------------------ */
@media (max-width: 1080px) {
  .calc { grid-template-columns: 1fr; }
  .res-col { position: static; max-height: none; overflow: visible; }
  .hero .wrap { grid-template-columns: 1fr; }
  .table-scene { display: none; }
  .mbar { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; justify-content: space-between; align-items: center; gap: 12px; padding: 0 14px; text-decoration: none; }
  }
@media (max-width: 720px) {
  h1.mc-h { font-size: 32px; --fpx: 4px; }
  h2.mc-h { font-size: 24px; --fpx: 3px; }
  body { font-size: 17px; }
  .hero .wrap { padding: 36px 0 32px; }
  .hero .lead { font-size: 18px; }
  .menu-btn.btn { display: inline-flex; margin-left: auto; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 14px; background: rgba(24, 14, 6, 0.95); padding: 16px; }
  #nav-toggle:checked ~ .nav { display: flex; }
  .ver { display: none; }
  .win { padding-inline: calc(2 * var(--g)); }
  .erow { flex-wrap: wrap; padding: 0 6px 6px 0; }
  .lvls { margin-left: 48px; }
  .step { padding-left: 0; }
  .step-n { position: static; display: block; margin-bottom: 6px; }
  }
@media (max-width: 380px) { :root { --g: 1.75px; } }
.modes { align-items: center; margin-bottom: 18px; }
.modes .mc-label { margin-right: 6px; }
.types { max-width: calc(11 * var(--slot)); }

/* --- enchantment pages ----------------------------------------------------------------------------- */
.ehero { position: relative; background: url(/assets/minecraft/textures/bookshelf.png) 0 0 / 96px 96px; box-shadow: inset 0 -4px 0 #2b1d10; }
.ehero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(500px 260px at 82% 50%, rgba(255, 196, 110, 0.26), transparent 70%), linear-gradient(180deg, rgba(30, 18, 8, 0.15), rgba(30, 18, 8, 0.4)); pointer-events: none; }
.ehero .wrap { position: relative; }
.ehero .wrap:not(.ehero-grid), .ehero-grid > div:first-child { background: var(--sheet); box-shadow: 0 0 0 4px var(--sheet-edge), inset 0 0 0 3px #fffaf0, inset 0 0 0 6px #e8d8b0, 6px 8px 0 4px rgba(30, 18, 8, 0.28); padding: 26px 30px 24px; }
.ehero .wrap:not(.ehero-grid) { margin-top: 36px; margin-bottom: 36px; }
.ehero .wrap:not(.ehero-grid), .ehero-grid > div:first-child, .hero-text { --paper: #2b1d10; --paper-dim: #5b4630; --paper-faint: #8a7356; --head-shadow: #dcc9a0; --link: #2348c0; }
.ehero-grid { padding: 36px 0; }
.ehero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: center; }
.ehero .lead { max-width: 680px; font-size: 19px; color: var(--paper); margin: 0 0 22px; }
.crumbs { display: flex; gap: 10px; font: 16px var(--mc); color: var(--paper-faint); margin-bottom: 14px; -webkit-font-smoothing: none; }
.crumbs a { color: var(--paper-dim); text-decoration: none; }
.crumbs a:hover { color: var(--link); }
.ehero-art { display: flex; flex-direction: column; align-items: center; gap: 20px; filter: drop-shadow(4px 6px 0 rgba(20, 10, 4, 0.45)); }
.ehero-book { animation: bob 4s ease-in-out infinite; }
.ico-xl { width: 128px; height: 128px; }
.ico-sm { width: 24px; height: 24px; }
.epage { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 48px; align-items: start; padding: 36px 0 72px; }
.facts { position: sticky; top: 16px; }
.facts dl { margin: 0 0 14px; display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center; font: 16px/20px var(--mc); -webkit-font-smoothing: none; }
.facts dt { color: #6b6b6b; }
.facts dd { margin: 0; color: var(--gui-text); }
.facts dd a { color: #1f3fbf; }
.facts dd a:hover { color: #000; }
.mcv { font: 16px var(--mc); color: var(--ok); -webkit-font-smoothing: none; }
.facts .mcv { color: #2b7a00; text-shadow: none; }
.btn-wide { width: 100%; }
.note { font-size: 15px; color: var(--paper-faint); }

.ways { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ways li { display: grid; gap: 2px; padding: 14px 16px; background: rgba(255, 255, 255, 0.85); border: 2px solid var(--rule); border-left: 6px solid var(--accent); }
.ways b { font: 16px var(--mc); color: var(--paper); font-weight: 400; -webkit-font-smoothing: none; }
.ways span { color: var(--paper-dim); font-size: 16px; }
.tips { padding-left: 1.1em; }
.tips li { margin-bottom: 8px; }
.tips li::marker { color: var(--accent); }
.prose .field { margin: 8px 0; }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 6px; background: rgba(255, 255, 255, 0.85); border: 2px solid var(--rule); font: 16px var(--mc); color: var(--paper); text-decoration: none; -webkit-font-smoothing: none; }
.chips a:hover { border-color: var(--link); color: var(--link); }
.chips .ico { width: 24px; height: 24px; }
.elist td { vertical-align: middle; }
.elist td:nth-child(4) { font: 15px/1.45 var(--serif); color: var(--paper-dim); }
.elist td:not(:first-child) { -webkit-font-smoothing: auto; }
table.t.elist td:nth-child(4), table.t.elist td.src { font-family: var(--serif); }
.elist .src { font-size: 14px; color: var(--paper-faint); white-space: nowrap; }
.ench-link { display: inline-flex; align-items: center; gap: 10px; font: 16px var(--mc); color: var(--paper); text-decoration: none; white-space: nowrap; -webkit-font-smoothing: none; }
.ench-link:hover { color: var(--link); }
.ench-link > .ico { width: 24px; height: 24px; }
.mini-items { display: flex; flex-wrap: wrap; gap: 0; width: calc(6 * var(--slot)); max-width: 100%; }

@media (max-width: 1080px) {
  .ehero-grid, .epage { grid-template-columns: 1fr; }
  .ehero-art { display: none; }
  .facts { position: static; }
}
@media (max-width: 720px) { .btn { white-space: normal; text-align: center; } }

/* --- item pages ------------------------------------------------------------------------------------ */
.ico-lg { width: 64px; height: 64px; }
.build-tip { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.build-tip .mc-tip { white-space: normal; }
.build-total { margin: 4px 0 0; }
.facts .btns { margin-top: 6px; }
.tier { font: 16px var(--mc); white-space: nowrap; -webkit-font-smoothing: none; }
.tier-max-build { color: var(--ok); }
.tier-alternative { color: var(--accent); }
.tier-optional { color: var(--paper-faint); }
.tier-avoid { color: var(--bad); }
table.t td .tier { font-family: var(--mc); }
table.t td.why { font: 16px/1.5 var(--serif); color: var(--paper-dim); -webkit-font-smoothing: auto; }
.variant { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 20px; flex-wrap: wrap; }
.variant p { flex: 1 1 260px; margin: 0; }
.armor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-bottom: 48px; }
.armor-grid .win + .win { margin-top: 0; }
.hub-win { display: inline-block; margin-top: 8px; max-width: 100%; }
.hub-win .slots { max-width: calc(12 * var(--slot)); }
a.slot:hover::before { content: ''; position: absolute; inset: var(--g); background: rgba(255, 255, 255, 0.5); }
.order-win { position: sticky; top: 16px; }
@media (max-width: 1080px) { .order-win { position: static; } }

/* --- tools ----------------------------------------------------------------------------------------- */
.tool-wrap { padding: 32px 0 8px; }
.tool-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.tool-grid .win + .win { margin-top: 0; }
.tool-win { max-width: 900px; }
.field.area { resize: vertical; min-height: 84px; font-size: 16px; }
.sga-box { background: #000; border: var(--g) solid #555; padding: 18px 20px; margin: 10px 0 12px; min-height: 90px; }
.sga { font: 32px/44px 'Minecraft Galactic'; color: #fff; text-shadow: 4px 4px 0 #3f3f3f; margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.sga-chart { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; margin: 16px 0; }
.sga-chart span { display: flex; flex-direction: column; align-items: center; padding: 10px 0 6px; margin: 4px; }
.sga-chart .sga { font-size: 32px; line-height: 36px; }
.sga-chart span .sga { color: var(--paper); text-shadow: 3px 3px 0 var(--head-shadow); }
.sga-chart i { font: 16px var(--mc); font-style: normal; color: var(--accent); margin-top: 4px; }
button.erow { width: 100%; padding: 4px 12px 4px 10px; cursor: pointer; justify-content: space-between; color: inherit; text-align: left; background: none; }
.range { width: 100%; accent-color: #55ff55; }
.gt { width: 100%; border-collapse: collapse; font: 16px/20px var(--mc); color: var(--gui-text); -webkit-font-smoothing: none; }
.gt th { text-align: left; color: #6b6b6b; font-weight: 400; padding: 6px 8px 6px 0; border-bottom: var(--g) solid #8b8b8b; }
.gt td { padding: 6px 8px 6px 0; border-bottom: 1px solid #aaa; vertical-align: top; }
.gt .pc { color: #1d6a00; }
.gt a { color: #1f3fbf; }
.num { width: 64px; height: 30px; border: var(--g) solid #a0a0a0; background: #000; color: #e0e0e0; font: 16px var(--mc); padding: 0 6px; -webkit-font-smoothing: none; }
.layers { display: flex; gap: 24px; flex-wrap: wrap; }
.shelf-grid { display: grid; grid-template-columns: repeat(5, 40px); gap: 2px; margin-top: 8px; }
.cell { width: 40px; height: 40px; border: 0; padding: 0; background: #8b8b8b; image-rendering: pixelated; }
.cell.empty { background: #6f6f6f; cursor: pointer; box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #fff; }
.cell.empty:hover { background: #9a9a9a; }
.cell.shelf { background: url(/assets/minecraft/textures/bookshelf.png) 0 0 / 100% 100%; cursor: pointer; }
.cell.table { background: url(/assets/minecraft/textures/enchanting_table_top.png) 0 0 / 100% 100%; }
.cell.air { background: #b5d6ff; opacity: 0.35; }
.levels-list { list-style: none; padding: 0; margin: 12px 0; font: 16px/26px var(--mc); color: var(--gui-text); }
.levels-list b { font-weight: 400; color: #1d6a00; display: inline-block; min-width: 90px; }
.kit { display: grid; gap: 12px; margin-bottom: 14px; }
.kit-item { display: flex; gap: 12px; align-items: flex-start; }
.kit-item .mc-tip { white-space: normal; }
.tool-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.tool-list a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; padding: 18px; text-decoration: none; color: var(--paper); height: 100%; margin: 4px; }
.tool-list a:hover { box-shadow: 0 0 0 4px var(--link), inset 0 0 0 3px #fffaf0, inset 0 0 0 6px #e8d8b0, 6px 8px 0 4px rgba(60, 36, 12, 0.25); }
.tool-list .ico { grid-row: span 2; }
.tool-list b { font: 16px var(--mc); color: var(--paper); font-weight: 400; -webkit-font-smoothing: none; }
.tool-list span { color: var(--paper-dim); font-size: 16px; }
@media (max-width: 900px) { .tool-grid { grid-template-columns: 1fr; } }

/* --- comparisons & answers ------------------------------------------------------------------------- */
.verdict b { font-weight: 600; color: var(--accent); }
.vs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-bottom: 40px; }
.vs-grid .win + .win { margin-top: 0; }
.vs-grid .win-h a { color: var(--gui-text); text-decoration: none; }
.vs-grid .win-h a:hover { color: #000; text-decoration: underline; }
.vs-dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; font: 16px/20px var(--mc); -webkit-font-smoothing: none; }
.vs-dl dt { color: #6b6b6b; }
.vs-dl dd { margin: 0; color: var(--gui-text); }
.chart { margin: 24px 0; padding: 16px; background: rgba(255, 255, 255, 0.9); border: 2px solid var(--rule); }
.chart figcaption { color: var(--paper-dim); margin-bottom: 10px; }
.chart svg { width: 100%; height: auto; display: block; }
.chart .cg { stroke: #efe2c2; stroke-width: 1; }
.chart .cl { fill: #857b6b; font: 14px var(--mc); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 10px 0 0; font: 16px var(--mc); color: var(--paper-dim); -webkit-font-smoothing: none; }
.legend i { display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; }
.pick2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pick2 label { display: grid; gap: 6px; }
select.field { appearance: none; cursor: pointer; margin: 0; }
.answer { font: 16px/24px var(--mc); color: var(--gui-text); margin: 16px 0 0; -webkit-font-smoothing: none; }
.answer .yes, .answer-big.yes b { color: #1d6a00; }
.answer .no { color: #b00000; }
.answer-big b { font: 24px var(--mc); }
.answer-big.yes b { color: var(--ok); }
.answer-big.no b { color: var(--bad); }
@media (max-width: 600px) { .pick2 { grid-template-columns: 1fr; } }

/* --- crafting grid --------------------------------------------------------------------------------- */
.craft { display: inline-block; }
.craft-row { display: flex; align-items: center; gap: calc(6 * var(--g)); margin-bottom: 10px; }
.craft-grid { display: grid; grid-template-columns: repeat(3, var(--slot)); }
.slot-out { width: calc(28 * var(--g)); height: calc(28 * var(--g)); }
.ehero-art .craft .mc-label { max-width: 260px; }
.nums { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0; }
.numfield { display: grid; gap: 6px; min-width: 130px; flex: 1 1 130px; }
.numfield .field { margin: 0; }
.swatches { display: flex; flex-wrap: wrap; gap: 4px; }
.swatch { width: 32px; height: 32px; border: var(--g) solid #373737; background: var(--s); cursor: pointer; padding: 0; }
.swatch[aria-pressed='true'] { outline: var(--g) solid #fff; outline-offset: 0; }
.swatch-i { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border: 1px solid #555; }
.rn-tip { margin-bottom: 8px; }
.cost b, .mc-label b { font-weight: 400; color: #000; }
.epage > *, .ehero-grid > *, .tool-grid > *, .calc > * { min-width: 0; }
.prose code, .accuracy code { overflow-wrap: anywhere; }
.mc-tip { max-width: 100%; }
.mc-tip span { white-space: normal; }
.prose .formula { color: #f0ece4; }

/* --- library theme details ------------------------------------------------------------------------ */
.content > .tscroll { padding: 18px 24px; margin: 4px 4px 32px; }
.prose { max-width: 820px; }
.epage .prose { max-width: none; }
.prose section .tscroll { margin: 14px 0; }
.ver-pick { margin-left: auto; }
.ver-pick select { margin: 0; height: 34px; padding: 0 10px; font-size: 16px; min-width: 210px; }
.field.pre { white-space: pre-wrap; }
.modes { margin-top: 4px; }
@media (max-width: 1080px) {
  .top .wrap { flex-wrap: wrap; }
  .edition { order: 3; width: 100%; justify-content: center; }
  .edition a { flex: 1; justify-content: center; }
  .hero-shelves::after { background: linear-gradient(180deg, rgba(30, 18, 8, 0.25), rgba(30, 18, 8, 0.45)); }
}
@media (max-width: 720px) {
  .prose section, .hero-text, .ehero .wrap:not(.ehero-grid), .ehero-grid > div:first-child { padding: 20px 18px 18px; }
  .ver-pick { margin-left: 0; width: 100%; }
  .ver-pick select { width: 100%; }
  .win-h { flex-wrap: wrap; }
}
/* the header stays pinned while scrolling */
.top { background: linear-gradient(180deg, rgba(24, 14, 6, 0.94), rgba(24, 14, 6, 0.86)); box-shadow: 0 2px 0 rgba(255, 220, 150, 0.15), 0 4px 12px rgba(0, 0, 0, 0.25); }
.res-col, .facts, .order-win { top: 100px; }
@media (max-width: 1080px) { .top { position: sticky; } .top .wrap { min-height: 0; padding: 6px 0 8px; gap: 8px 16px; } .edition a { height: 36px; } }

/* --- world: sky behind everything, a slice of terrain as the footer -------------------------------- */
html[data-theme='overworld'] { --sky: linear-gradient(180deg, #4f8fee 0%, #7fb2fa 40%, #bcdcff 100%); --surface: url(/assets/minecraft/textures/craft/grass_block.png); --canopy: none; }
html[data-theme='cherry'] { --sky: linear-gradient(180deg, #f2a3c8 0%, #f8c9de 40%, #fff0f6 100%); --surface: url(/assets/minecraft/textures/craft/grass_block.png); --canopy: url(/assets/minecraft/textures/cherry_leaves.png); }
html[data-theme='snowy'] { --sky: linear-gradient(180deg, #86acd6 0%, #b7d2ee 40%, #eef6fc 100%); --surface: url(/assets/minecraft/textures/grass_block_snow.png); --canopy: none; }
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--sky); pointer-events: none; }
.sun { position: absolute; top: 110px; right: 9%; width: 128px; height: 128px; background: url(/assets/minecraft/textures/sun_alpha.png) center / 100% 100%; image-rendering: pixelated; filter: drop-shadow(0 0 28px rgba(255, 240, 170, 0.9)); }
html[data-theme='snowy'] .sun { opacity: 0.55; filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.8)); }
.clouds { position: absolute; left: 0; top: 0; width: calc(100% + 3072px); height: 75vh; background: url(/assets/minecraft/textures/clouds_alpha.png) 0 0 / 3072px 3072px; image-rendering: pixelated; opacity: 0.62; will-change: transform; animation: drift 420s linear infinite; -webkit-mask: linear-gradient(#000 0, #000 35%, transparent 100%); mask: linear-gradient(#000 0, #000 35%, transparent 100%); }
html[data-theme='cherry'] .clouds { opacity: 0.45; }
html[data-theme='snowy'] .clouds { opacity: 0.7; filter: brightness(0.96); }
@keyframes drift { from { transform: translateX(-3072px); } to { transform: translateX(0); } }
.petals, .flakes { display: none; }
html[data-theme='cherry'] .petals, html[data-theme='snowy'] .flakes { display: block; }
.petals i, .flakes i { position: absolute; top: -24px; animation: fall linear infinite; image-rendering: pixelated; will-change: transform; }
.petals i { width: 12px; height: 12px; background-size: 100% 100%; }
.flakes i { width: var(--s); height: var(--s); background: #fff; box-shadow: 0 0 0 1px rgba(150, 180, 210, 0.35); }
@keyframes fall { 0% { transform: translate(0, 0) rotate(0); } 100% { transform: translate(var(--drift), 110vh) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .clouds, .petals i, .flakes i { animation: none; } .petals, .flakes { display: none !important; } }

.foot { position: relative; min-height: 576px; color: var(--gui-text); }
.strata { position: absolute; inset: 0; overflow: hidden; image-rendering: pixelated;
  background:
    var(--canopy) 0 0 / 64px 64px repeat-x,
    var(--surface) 0 64px / 64px 64px repeat-x,
    url(/assets/minecraft/textures/dirt.png) 0 128px / 64px 64px repeat-x,
    url(/assets/minecraft/textures/stone.png) 0 192px / 64px 64px repeat-x,
    url(/assets/minecraft/textures/stone.png) 0 256px / 64px 64px repeat-x,
    url(/assets/minecraft/textures/stone.png) 0 320px / 64px 64px repeat-x,
    url(/assets/minecraft/textures/craft/bedrock.png) 0 100% / 64px 64px repeat-x,
    url(/assets/minecraft/textures/deepslate.png) 0 0 / 64px 64px repeat; }
html[data-theme='overworld'] .strata, html[data-theme='snowy'] .strata { background-position: 0 -64px, 0 0, 0 64px, 0 128px, 0 192px, 0 256px, 0 100%, 0 0; }
html[data-theme='overworld'] .strata .ore, html[data-theme='snowy'] .strata .ore { margin-top: -64px; }
.strata::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0, transparent 180px, rgba(0, 0, 0, 0.12) 260px, rgba(0, 0, 0, 0.45) 100%); }
.strata .ore { position: absolute; width: 64px; height: 64px; background-size: 100% 100%; }
.foot-in { position: relative; padding: 196px 0 110px; }
html[data-theme='cherry'] .foot-in { padding-top: 250px; }
.foot-win { max-width: 900px; }
.foot-win .win-h { font-size: 16px; }
.foot-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 24px; overflow-wrap: break-word; font: 15px/1.55 var(--serif); color: #3a3a3a; }
.foot-cols p { margin: 0 0 10px; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; }
.foot-cols li { margin-bottom: 6px; }
.foot-cols a { font: 16px var(--mc); color: #1f3fbf; text-decoration: none; -webkit-font-smoothing: none; }
.foot-cols a:hover { color: #000; text-decoration: underline; }
@media (max-width: 720px) { .foot-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .foot-cols > div { grid-column: 1 / -1; } .sun { width: 80px; height: 80px; right: 6%; } }

/* design picker on the seam between the bookshelf header and the page */
.theme-seam { position: relative; z-index: 6; display: flex; justify-content: center; height: 0; }
.theme-pick { display: flex; align-items: center; gap: 6px; padding: 6px 10px; transform: translateY(-50%); background: rgba(24, 14, 6, 0.9); box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #6b5236, 0 6px 14px rgba(0, 0, 0, 0.3); }
.theme-pick .mc-label { color: #fff; margin-right: 4px; text-shadow: 2px 2px 0 #3f2a12; }
.theme-pick .btn { min-height: 36px; font-size: 16px; padding: 0 12px 0 6px; }
.th-ico { width: 22px; height: 22px; }
.hero + .theme-seam + *, .ehero + .theme-seam + * { padding-top: 48px; }
@media (max-width: 720px) { .theme-pick { gap: 2px; padding: 4px; max-width: calc(100% - 8px); } .theme-pick .mc-label, .th-rest { display: none; } .theme-pick .btn { gap: 4px; padding: 0 5px 0 3px; white-space: nowrap; } .th-ico { width: 16px; height: 16px; } }
/* language menu and Discord in the header */
.top-tools { display: flex; align-items: center; gap: 6px; }
.top-tools .btn { min-height: 40px; padding: 0 10px 0 8px; }
.discord svg { flex: none; }
.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; }
.lang summary::-webkit-details-marker { display: none; }
.lang ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; list-style: none; margin: 0; padding: 6px 0; min-width: 220px; max-height: 70vh; overflow-y: auto; background: rgba(16, 0, 16, 0.96); box-shadow: 0 0 0 2px #2b0f5a, 0 8px 20px rgba(0, 0, 0, 0.4); }
.lang li a, .lang li span { display: flex; justify-content: space-between; gap: 12px; padding: 6px 14px; font: 16px var(--mc); color: #fff; text-decoration: none; -webkit-font-smoothing: none; }
.lang li a[aria-current] { color: #ffff55; }
.lang li span { color: #8a8a8a; cursor: default; }
.lang li small { font: 16px var(--mc); color: #6a6a6a; }
@media (max-width: 1080px) { .top-tools { order: 2; margin-left: auto; } .discord span { display: none; } }
.nav { gap: 18px; } .nav a { white-space: nowrap; } @media (max-width: 1240px) and (min-width: 1081px) { .logo span { display: none; } }
/* language flags, Discord, edition colours */
.lang .fi { width: 22px; height: 16px; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); }
.lang summary { gap: 8px; }
.lang li a, .lang li span[lang] { justify-content: flex-start; align-items: center; gap: 10px; }
.lang li span[lang] { color: #e0e0e0; cursor: default; }
.lang li span[lang]:hover, .lang li a:hover { background: rgba(255, 255, 255, 0.08); }
.discord { display: inline-grid; place-items: center; width: 44px; height: 40px; background: #5865f2; color: #fff; box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px #8891f5, inset -2px -2px 0 2px #3c45a5; text-decoration: none; }
.discord:hover { background: #6d78f6; color: #fff; }
.edition a { border-image: none; border: 0; padding: 0 16px; box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px rgba(255, 255, 255, 0.28), inset -2px -2px 0 2px rgba(0, 0, 0, 0.3); }
.edition .ed-java { background: #3c8527; }
.edition .ed-bedrock { background: #4a4f57; }
.edition a:hover { filter: brightness(1.12); color: #fff; }
.edition a[aria-current] { color: #ffff55; box-shadow: inset 0 0 0 2px #000, inset 2px 2px 0 2px rgba(255, 255, 255, 0.28), inset -2px -2px 0 2px rgba(0, 0, 0, 0.3), 0 0 0 2px #ffff55; }
.edition a:not([aria-current]) { opacity: 0.85; }

/* full-width text; long articles get a sticky table of contents on the right */
.prose, .epage .prose { max-width: none; }
.hub-text { margin-top: 40px; }
.has-toc { display: grid; grid-template-columns: minmax(0, 1fr) 280px; grid-auto-flow: dense; gap: 0 40px; align-items: start; }
.has-toc > * { grid-column: 1 / -1; min-width: 0; }
.has-toc > .prose { grid-column: 1; }
.has-toc > .toc { grid-column: 2; position: sticky; top: 120px; max-height: calc(100vh - 140px); overflow: auto; margin: 4px; padding: 20px 22px; background: #fbf4e2; box-shadow: 0 0 0 4px var(--trim), inset 0 0 0 3px #fffaf0, inset 0 0 0 6px #ead9b3, 6px 8px 0 4px rgba(60, 36, 12, 0.22); scrollbar-width: thin; }
.toc-h { font: 16px var(--mc); -webkit-font-smoothing: none; color: #2b1d10; margin: 0 0 10px; }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { margin: 0; }
.toc a { display: block; padding: 6px 0 6px 12px; border-left: 3px solid #ead9b3; color: #5b4630; text-decoration: none; font-size: 15px; line-height: 1.35; }
.toc a:hover { color: #2348c0; border-left-color: #c9b07a; }
.toc a[aria-current="true"] { color: #2b1d10; font-weight: 600; border-left-color: #3c8527; }
.prose h2[id] { scroll-margin-top: 130px; }
@media (max-width: 1080px) {
  .has-toc { grid-template-columns: 1fr; }
  .has-toc > .toc, .has-toc > .prose { grid-column: 1; }
  .has-toc > .toc { position: static; max-height: 260px; margin-bottom: 36px; }
}
.ench-link .slot { flex: none; }
.t td .slot { vertical-align: middle; }

/* guide artwork */
.scene { display: block; width: 100%; max-width: 460px; height: auto; image-rendering: pixelated; }
.ehero-grid .ehero-art .scene { max-width: 340px; }
.ehero-art:has(.scene) .ehero-book { display: none; }
.guide-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.guide-list a { display: flex; flex-direction: column; gap: 6px; height: 100%; margin: 4px; padding: 14px 18px 18px; text-decoration: none; color: var(--paper); background: #fbf4e2; box-shadow: 0 0 0 4px var(--trim), inset 0 0 0 3px #fffaf0, inset 0 0 0 6px #ead9b3, 6px 8px 0 4px rgba(60, 36, 12, 0.22); }
.guide-list a:hover { box-shadow: 0 0 0 4px var(--link), inset 0 0 0 3px #fffaf0, inset 0 0 0 6px #e8d8b0, 6px 8px 0 4px rgba(60, 36, 12, 0.25); }
.guide-thumb { display: block; width: 100%; height: auto; aspect-ratio: 640 / 440; image-rendering: pixelated; background: radial-gradient(closest-side, #f3e6c6, transparent); margin-bottom: 6px; transition: transform 0.2s; }
.guide-list a:hover .guide-thumb { transform: translateY(-4px); }
.guide-list b { font: 18px var(--mc); color: #2b1d10; font-weight: 400; -webkit-font-smoothing: none; }
.guide-list span { color: #5b4630; font-size: 16px; }
@media (min-width: 1081px) { .ehero-grid:has(.scene) { grid-template-columns: minmax(0, 1fr) 480px; } }
.ehero-grid .ehero-art .scene { max-width: 480px; background: radial-gradient(closest-side, rgba(255, 236, 190, 0.7), rgba(255, 236, 190, 0.25) 70%, transparent); }
.ehero-art:has(.scene) .craft { margin-top: -24px; }

/* Translated pages: long words (German compounds and the like) break and hyphenate instead of widening the page */
.mc-h, h1, h2, h3, .lead, .btn, td, th, dd, dt, .mc-label { overflow-wrap: break-word; }
html:not([lang="en"]) main, html:not([lang="en"]) .mc-h { hyphens: auto; }
/* on small phones the theme picker shows the chosen theme's name and the others as icons */
@media (max-width: 480px) { .theme-pick .btn[aria-pressed="false"] { font-size: 0; gap: 0; padding: 0 5px; } }
/* longer words in other languages: a step smaller heading on small phones, so a word breaks at most once */
@media (max-width: 480px) { html:not([lang="en"]) h1.mc-h { font-size: 24px; --fpx: 3px; } }

/* --- logo: enchantmenttable ------------------------------------------------------------------------ */
/* an enchanting table mark, "enchantment" set small above a large "table" with the enchanting glint */
.logo { gap: 10px; }
.logo-mark { width: 48px; height: 56px; image-rendering: pixelated; flex: none; transition: transform 0.25s; }
.logo:hover .logo-mark { transform: translateY(-2px); }
.logo-text { display: flex; flex-direction: column; align-items: stretch; text-transform: lowercase; text-shadow: none; }
.logo-text .l1 { font: 16px/16px var(--mc); color: #fff; letter-spacing: 0; filter: drop-shadow(2px 2px 0 #3f2a12); }
.logo-text .l2 { font: 700 32px/30px var(--mc); letter-spacing: 1px; color: #c9a4ff;
  background: linear-gradient(100deg, #b98aff 0%, #e7d6ff 22%, #9d6cff 40%, #c9a4ff 60%, #f0e6ff 78%, #a77bff 100%) 0 0 / 220% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 2px 0 #2a1748); animation: logo-glint 6s linear infinite; }
.logo:hover .l1 { color: #ffff55; }
@keyframes logo-glint { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) { .logo-text .l2 { animation: none; } }
@media (max-width: 480px) { .logo-mark { width: 40px; height: 46px; } .logo-text .l1 { font-size: 14px; line-height: 14px; } .logo-text .l2 { font-size: 26px; line-height: 24px; } }

/* --- footer: brand, three link columns, languages ---------------------------------------------------- */
.foot-cols { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 28px; }
.foot-logo { margin-bottom: 12px; }
.foot-logo .l1 { color: #3a2a18; filter: none; }
.foot-logo .l2 { filter: drop-shadow(2px 2px 0 #c9b9e9); }
.foot-about p a { color: #1f3fbf; }
.foot-h { margin: 0 0 10px; font: 16px/20px var(--mc); color: #3a3a3a; -webkit-font-smoothing: none; }
.foot-cols nav ul { list-style: none; margin: 0; padding: 0; }
.foot-discord { margin-top: 6px; color: #fff; }
.foot-discord svg { width: 20px; height: 15px; }
.linkish { background: none; border: 0; padding: 0; cursor: pointer; font: 16px var(--mc); color: #1f3fbf; -webkit-font-smoothing: none; text-align: left; }
.linkish:hover { color: #000; text-decoration: underline; }
.foot-langs { margin-top: 18px; padding-top: 14px; border-top: 2px solid rgba(0, 0, 0, 0.12); }
.foot-langs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.foot-langs a { display: inline-flex; align-items: center; gap: 6px; font: 15px/1.6 var(--serif); color: #1f3fbf; text-decoration: none; }
.foot-langs a:hover { text-decoration: underline; }
.foot-langs a[aria-current] { color: #3a3a3a; font-weight: 600; }
@media (max-width: 1080px) { .foot-cols { grid-template-columns: 1fr 1fr 1fr; } .foot-cols > .foot-about { grid-column: 1 / -1; } }
@media (max-width: 720px) { .foot-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .foot-cols > .foot-about { grid-column: 1 / -1; } .foot-cols nav[aria-label="Site"] { grid-column: 1 / -1; } }

/* --- cookie consent: Google Analytics only loads after a choice -------------------------------------- */
.consent-bar { position: fixed; z-index: 90; left: 16px; right: 16px; bottom: 16px; max-width: 680px; margin: 0 auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; background: rgba(24, 14, 6, 0.94); border: 3px solid #000; box-shadow: inset 0 0 0 2px #6b5236, 0 10px 24px rgba(0, 0, 0, 0.5); }
.consent-bar p { flex: 1 1 260px; margin: 0; color: #f2f2f2; font: 15px/1.45 var(--serif); }
.consent-bar p a { color: #ffff55; }
.consent-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.consent-btns .btn.primary { border-image-source: url(/assets/minecraft/textures/gui/button_hover.png); color: #ffffa0; text-shadow: 2px 2px 0 #3f3f28; }
.consent-shade { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.55); }
.consent-box { max-width: 560px; width: 100%; }
.consent-box p { margin: 0 0 12px; color: #3a3a3a; font: 15px/1.5 var(--serif); }
.consent-box p a { color: #1f3fbf; }
.consent-box .consent-btns { margin-top: 16px; }
@media (max-width: 480px) { .consent-btns { margin-left: 0; width: 100%; } .consent-btns .btn { flex: 1 1 auto; } }
.foot-langs .fi { display: inline-block; width: 20px; height: 15px; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); }
.foot-about p a { font: inherit; -webkit-font-smoothing: auto; }
.foot-cols a.foot-discord { color: #fff; font: 16px var(--mc); text-decoration: none; }
.foot-cols a.foot-discord:hover { color: #ffffa0; }
/* the rail behind the page-design buttons runs the full width of the page */
.theme-seam::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 18px; background: rgba(24, 14, 6, 0.9); box-shadow: 0 2px 0 #000, 0 -2px 0 #000, inset 0 2px 0 #6b5236, inset 0 -2px 0 #6b5236; }
.theme-seam .theme-pick { position: relative; }
/* mobile header: logo + tools + menu on one row, edition switch below */
.menu-btn .hb { display: none; width: 18px; height: 14px; background: linear-gradient(currentColor 0 0) 0 0 / 100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 6px / 100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 12px / 100% 2px no-repeat; }
@media (max-width: 1080px) {
  .top .wrap { flex-wrap: wrap; }
  .logo { order: 0; margin-right: auto; }
  .top-tools { order: 1; margin-left: 0; }
  .menu-btn.btn { order: 2; margin-left: 0; }
  .edition { order: 3; width: 100%; }
}
@media (max-width: 720px) {
  .top .wrap { gap: 8px 6px; }
  .menu-btn.btn { min-height: 40px; padding: 0 12px; align-items: center; }
}
@media (max-width: 480px) {
  .logo { gap: 6px; }
  .logo-mark { width: 36px; height: 42px; }
  .logo-text .l1 { font-size: 12px; line-height: 12px; }
  .logo-text .l2 { font-size: 24px; line-height: 22px; }
  .top-tools { gap: 4px; }
  .top-tools .btn, .menu-btn.btn { min-height: 38px; }
  .discord { width: 40px; height: 38px; }
  .menu-btn .hb { display: block; }
  .menu-btn .mt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menu-btn.btn { width: 44px; padding: 0; justify-content: center; }
}