/* MilestoneSMP: the game's own interface, rebuilt for the web. One stylesheet for every page.
   One interface pixel is 2 CSS pixels, so the pixel font is set in multiples of 8px.
   Textures under /assets/tex are drawn by build.mjs (art/), which also adds the .i-* icon classes. */

@font-face { font-family: 'Milestone Pixel'; font-weight: 400; font-display: swap; src: url(/fonts/milestone-pixel.otf?v=30ca89b3a5) format('opentype'); }
@font-face { font-family: 'Milestone Pixel'; font-weight: 700; font-display: swap; src: url(/fonts/milestone-pixel-bold.otf?v=30ca89b3a5) format('opentype'); }

:root {
  --mc: 'Milestone Pixel', ui-monospace, Consolas, monospace;
  --text: #e0e0e0;
  --gray: #aaaaaa;
  --dgray: #555555;
  --gold: #ffaa00;
  --yellow: #ffff55;
  --green: #55ff55;
  --red: #ff5555;
  --dred: #aa0000;
  --aqua: #55ffff;
  --wrap: 1120px;
  --sh: #383838;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* scroll bar like the game's lists: black track, bevelled grey thumb */
html { scrollbar-color: #8b8b8b #000; }
@supports selector(::-webkit-scrollbar) { html { scrollbar-color: auto; } }
::-webkit-scrollbar { width: 12px; height: 12px; background: #000; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #8b8b8b; border: 2px solid #000; box-shadow: inset 2px 2px 0 #c6c6c6, inset -2px -2px 0 #555; }
::-webkit-scrollbar-thumb:hover { background: #a0a0a0; }
::-webkit-scrollbar-thumb:active { background: #b0b0b0; }
::-webkit-scrollbar-corner { background: #000; }
::-webkit-scrollbar-button { display: none; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  font: 16px/24px var(--mc);
  color: var(--text);
  background: #140f0a url(/assets/tex/bg_dirt.png?v=30ca89b3a5) 0 0 / 64px;
  image-rendering: pixelated;
}
/* the game draws a shadow one pixel down-right of most text, in a quarter of the text colour */
body, body * { text-shadow: 2px 2px 0 var(--sh); }
/* the last ground layer stretches down to the footer on short pages */
main { flex: 1; display: flex; flex-direction: column; }
main > :last-child { flex: 1; }
img, svg, canvas { display: block; max-width: 100%; }
::selection { background: #3030ff; color: #fff; }

h1, h2, h3, .h3 { font-weight: 400; margin: 0 0 16px; color: #fff; --sh: #3f3f3f; text-wrap: balance; }
h1 { font-size: 48px; line-height: 56px; }
h2 { font-size: 32px; line-height: 40px; }
h3, .h3 { font-size: 16px; line-height: 24px; font-weight: 700; margin-bottom: 8px; }
@media (max-width: 600px) { h1 { font-size: 32px; line-height: 40px; } h2 { font-size: 24px; line-height: 32px; } }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 700; color: #fff; --sh: #3f3f3f; }
em { font-style: normal; color: var(--yellow); --sh: #3f3f15; }
a { color: var(--aqua); --sh: #153f3f; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { color: #ffffa0; --sh: #3f3f28; }
code, kbd { font: inherit; color: var(--yellow); --sh: #3f3f15; background: rgba(0, 0, 0, 0.45); padding: 0 4px; overflow-wrap: anywhere; }
.muted { color: var(--gray); --sh: #2a2a2a; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
@media (max-width: 480px) { .wrap { padding: 0 16px; } }

.skip { position: absolute; left: 12px; top: -80px; z-index: 90; padding: 8px 14px; background: #000; color: #fff; border: 2px solid #fff; }
.skip:focus { top: 12px; }

/* game colour codes, for text that comes from the server (MOTD, item names) */
.c-0 { color: #000; --sh: #000; } .c-1 { color: #0000aa; --sh: #00002a; } .c-2 { color: #00aa00; --sh: #002a00; }
.c-3 { color: #00aaaa; --sh: #002a2a; } .c-4 { color: #aa0000; --sh: #2a0000; } .c-5 { color: #aa00aa; --sh: #2a002a; }
.c-6 { color: #ffaa00; --sh: #3f2a00; } .c-7 { color: #aaaaaa; --sh: #2a2a2a; } .c-8 { color: #555555; --sh: #151515; }
.c-9 { color: #5555ff; --sh: #15153f; } .c-a { color: #55ff55; --sh: #153f15; } .c-b { color: #55ffff; --sh: #153f3f; }
.c-c { color: #ff5555; --sh: #3f1515; } .c-d { color: #ff55ff; --sh: #3f153f; } .c-e { color: #ffff55; --sh: #3f3f15; }
.c-f { color: #ffffff; --sh: #3f3f3f; }
.f-l { font-weight: 700; } .f-o { font-style: italic; } .f-n { text-decoration: underline; } .f-m { text-decoration: line-through; }
.f-n.f-m { text-decoration: underline line-through; }

/* ---- Icons (16x16 sprites, see art/icons.mjs) ---- */
.ico { display: inline-block; flex-shrink: 0; width: 32px; height: 32px; background-repeat: no-repeat; vertical-align: middle; --sh: transparent; }
.ico-l { width: 48px; height: 48px; }

/* ---- Buttons: stone, yellow text on hover ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 4px 16px;
  font: 16px/24px var(--mc); color: var(--text); --sh: #383838; text-align: center; text-decoration: none;
  background: #626262 url(/assets/tex/btn.png?v=30ca89b3a5) 0 0 / 32px;
  border: 2px solid #000;
  box-shadow: inset 2px 2px 0 #aaaaaa, inset -2px -4px 0 #4c4c4c;
  cursor: pointer; user-select: none;
}
.btn:hover, .btn:focus-visible {
  color: #ffffa0; --sh: #3f3f28;
  background-color: #6068a4; background-image: url(/assets/tex/btn_hover.png?v=30ca89b3a5);
  box-shadow: inset 2px 2px 0 #b8c0ff, inset -2px -4px 0 #4a5290;
  outline: none;
}
.btn:focus-visible { border-color: #fff; }
.btn:active { box-shadow: inset 2px 2px 0 #4a5290, inset -2px -2px 0 #b8c0ff; padding-top: 6px; padding-bottom: 2px; }
.btn[aria-current='page'], .btn:disabled, .btn.off {
  color: #a0a0a0; --sh: #282828; cursor: default;
  background-color: #2c2c2c; background-image: url(/assets/tex/btn_off.png?v=30ca89b3a5);
  box-shadow: inset 2px 2px 0 #3a3a3a, inset -2px -2px 0 #1a1a1a;
}
.btn small { font-size: 16px; color: var(--yellow); --sh: #3f3f15; }
.btn:hover small, .btn:focus-visible small { color: #d8d8a0; }
.btn-wide { width: 100%; min-height: 48px; }
.btn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 340px) { .btn-pair { grid-template-columns: 1fr; } }
.btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.btn.copied { color: var(--green); --sh: #153f15; }
.btn[data-copy] { flex-wrap: wrap; row-gap: 0; }

/* ---- Header ---- */
.top { position: sticky; top: 0; z-index: 40; background: rgba(0, 0, 0, 0.82); border-bottom: 2px solid #000; box-shadow: 0 2px 0 #2a2a2a; }
.top-in { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; --sh: #3f3f3f; text-decoration: none; font-size: 24px; line-height: 32px; flex-shrink: 0; }
.brand img { width: 32px; height: 32px; }
.brand:hover { color: #ffffa0; }
.nav { display: flex; gap: 6px; flex: 1; justify-content: center; }
.nav .btn { min-height: 36px; padding: 2px 12px; white-space: nowrap; }
.pill { display: inline-flex; align-items: center; gap: 8px; color: var(--gray); --sh: #2a2a2a; text-decoration: none; white-space: nowrap; padding: 4px 8px; background: rgba(255, 255, 255, 0.06); }
.pill:hover { color: #ffffa0; background: rgba(255, 255, 255, 0.12); }
.pill.is-online [data-pill-text] { color: var(--text); }
.pill.is-offline [data-pill-text] { color: var(--red); --sh: #3f1515; }
.btn-menu { display: none; }
.xp { height: 6px; background: #000; position: absolute; left: 0; right: 0; bottom: -8px; pointer-events: none; }
.xp span { display: block; height: 100%; width: 0; background: linear-gradient(#b8ff6b 0 2px, #80ff20 2px 4px, #4f9e12 4px); }
.xp::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(5.555% - 2px), #000 calc(5.555% - 2px) 5.555%); }
@media (max-width: 1060px) {
  .nav { display: none; }
  .btn-menu { display: inline-flex; margin-left: auto; }
  .pill { margin-left: auto; }
  .pill + .btn-menu { margin-left: 0; }
}
@media (max-width: 480px) {
  .brand { font-size: 16px; }
  .brand img { width: 24px; height: 24px; }
  .top-in { gap: 8px; }
  .pill { padding: 4px 6px; }
  .btn-menu { padding: 2px 10px; }
}
@media (max-width: 420px) { .brand img { display: none; } }
/* the pill keeps its label for screen readers (aria-label) and shows just the signal bars */
@media (max-width: 360px) { .pill [data-pill-text] { display: none; } }
/* without JavaScript the menu button can't open anything, so keep the links */
.no-js .nav { display: flex; flex-wrap: wrap; }
.no-js .btn-menu { display: none; }
.no-js .js-only, .js .nojs-only { display: none !important; }
.no-js .hotbar, .no-js .held { display: none; }
@media (max-width: 1060px) {
  .no-js .top { position: static; }
  .no-js .top-in { flex-wrap: wrap; }
  .no-js .nav { order: 3; flex: 1 0 100%; justify-content: flex-start; padding-bottom: 8px; }
}

/* signal bars, as in the server list */
.ping { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; flex-shrink: 0; }
.ping i { width: 4px; background: #3a3a3a; box-shadow: 2px 2px 0 #151515; }
.ping i:nth-child(1) { height: 4px; } .ping i:nth-child(2) { height: 6px; } .ping i:nth-child(3) { height: 8px; }
.ping i:nth-child(4) { height: 10px; } .ping i:nth-child(5) { height: 14px; }
.ping.p-ok i { background: #3fbf3f; }
.ping.p-wait i { animation: ping-wait 1s steps(1) infinite; }
.ping.p-wait i:nth-child(2) { animation-delay: 0.2s; } .ping.p-wait i:nth-child(3) { animation-delay: 0.4s; }
.ping.p-wait i:nth-child(4) { animation-delay: 0.6s; } .ping.p-wait i:nth-child(5) { animation-delay: 0.8s; }
@keyframes ping-wait { 0% { background: #3fbf3f; } 20% { background: #3a3a3a; } }
.ping.p-off { position: relative; }
.ping.p-off i { background: #3a3a3a; }
.ping.p-off::after { content: '\00d7'; position: absolute; left: 50%; top: -6px; transform: translateX(-50%); color: var(--red); --sh: #3f1515; font-size: 16px; }

/* ---- Game menu (phones) ---- */
.game-menu { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; color: var(--text); background: rgba(16, 16, 16, 0.78); overflow: auto; }
.game-menu::backdrop { background: rgba(0, 0, 0, 0.4); }
.gm-in { display: grid; gap: 8px; width: min(400px, calc(100% - 32px)); margin: 12vh auto 40px; }
.game-menu h2 { text-align: center; font-size: 16px; line-height: 24px; margin-bottom: 24px; }

/* ---- Ground layers: the page is a slice through the world, getting deeper as you scroll ---- */
.layer { position: relative; padding: 72px 0; background-size: 64px; }
.l-dirt { background-color: #140f0a; background-image: url(/assets/tex/bg_dirt.png?v=30ca89b3a5); }
.l-stone { background-color: #1e1e1e; background-image: url(/assets/tex/bg_stone.png?v=30ca89b3a5); }
.l-deep { background-color: #18181b; background-image: url(/assets/tex/bg_deepslate.png?v=30ca89b3a5); }
.l-bedrock { background-color: #141414; background-image: url(/assets/tex/bg_bedrock.png?v=30ca89b3a5); }
.e-dirt::before, .e-stone::before, .e-deep::before { content: ''; position: absolute; left: 0; right: 0; top: -32px; height: 64px; background-size: 64px; pointer-events: none; z-index: 1; }
.l-stone.e-dirt::before { background-image: url(/assets/tex/edge_dirt_stone.png?v=30ca89b3a5); }
.l-deep.e-stone::before { background-image: url(/assets/tex/edge_stone_deepslate.png?v=30ca89b3a5); }
.l-deep.e-dirt::before { background-image: url(/assets/tex/edge_dirt_deepslate.png?v=30ca89b3a5); }
.l-bedrock.e-deep::before { background-image: url(/assets/tex/edge_deepslate_bedrock.png?v=30ca89b3a5); }
.layer > .wrap { position: relative; z-index: 2; }
.layer + .layer { padding-top: 88px; }

.screen-title { text-align: center; margin-bottom: 8px; }
.screen-sub { text-align: center; color: var(--gray); --sh: #2a2a2a; max-width: 720px; margin: 0 auto 32px; }
.stack { display: grid; gap: 48px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }
.grid-2 + .grid-2 { margin-top: 24px; }

/* ---- Panels ---- */
/* inventory: light grey with a bevel and cut corners, dark text without shadow */
.gui {
  --sh: transparent; color: #404040;
  background: #c6c6c6;
  border: 2px solid #000;
  box-shadow: inset 4px 4px 0 #fff, inset -4px -4px 0 #555;
  padding: 20px 22px 22px;
  clip-path: polygon(2px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0 calc(100% - 2px), 0 2px);
  min-width: 0;
}
.gui h2, .gui h3, .gui strong, .gui b { color: #404040; --sh: transparent; }
.gui h2 { font-size: 16px; line-height: 24px; margin-bottom: 12px; }
.gui .muted { color: #4a4a4a; --sh: transparent; }
.gui code { color: #2a2a7a; --sh: transparent; background: rgba(0, 0, 0, 0.08); }
.gui a:not(.btn) { color: #2a2a9a; }
.gui .btn { --sh: #383838; }

.slot { display: inline-grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; background: #8b8b8b; box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #fff; position: relative; }
.slot-l { width: 60px; height: 60px; }
.slot .count { position: absolute; right: 2px; bottom: 0; color: #fff; --sh: #3f3f3f; line-height: 16px; }

/* tooltip: near-black purple with a violet border */
.tip {
  color: var(--gray); --sh: #2a2a2a;
  background: rgba(16, 0, 16, 0.94);
  border: 2px solid; border-image: linear-gradient(#5a1fd6, #2a0a6e) 1;
  box-shadow: 0 0 0 2px rgba(16, 0, 16, 0.94);
  padding: 14px 16px;
  min-width: 0;
}
.tip h3 { color: #fff; }
.tip .lore { color: #d040d0; --sh: #340834; font-style: italic; }

/* translucent black, like the chat, scoreboard and player list */
.glass { background: rgba(0, 0, 0, 0.55); padding: 12px 14px; min-width: 0; }

.panel-title { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.panel-title h2, .panel-title h3 { margin: 0; }

/* ---- Title screen ---- */
.ts { position: relative; min-height: clamp(600px, calc(100svh - 66px), 920px); overflow: hidden; background: #070914; display: flex; flex-direction: column; isolation: isolate; }
.panorama { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; image-rendering: pixelated; z-index: -1; touch-action: manipulation; }
.ts.aim { cursor: url(/assets/tex/cursor_sword.png?v=30ca89b3a5) 28 4, crosshair; }
.ts-in { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; padding: 56px 24px 56px; pointer-events: none; }
.ts-in a, .ts-in button { pointer-events: auto; }
.logo-wrap { position: relative; width: min(888px, 100%); margin: 0; }
/* the logo is pixel art: show it at exactly 2x or 1x, and smooth it only when it has to shrink */
@media (max-width: 960px) { .logo-wrap { width: min(444px, 100%); } }
@media (max-width: 491px) { .logo { image-rendering: auto; } }
.logo { width: 100%; height: auto; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.45)); }
.splash {
  position: absolute; right: -2%; top: 46%; z-index: 2;
  font: 24px/32px var(--mc); color: #ffff00; --sh: #3f3f00; white-space: nowrap;
  background: none; border: 0; padding: 0; cursor: pointer;
  transform: rotate(-20deg); transform-origin: 50% 50%;
  animation: splash 0.45s ease-in-out infinite alternate;
}
.splash:focus-visible { outline-offset: 6px; }
@keyframes splash { from { transform: rotate(-20deg) scale(1); } to { transform: rotate(-20deg) scale(1.09); } }
.ts-sub { margin: 20px 0 0; text-align: center; color: #fff; --sh: #3f3f3f; }
.ts-menu { width: min(420px, 100%); display: grid; gap: 8px; margin-top: 28px; }
.ts-menu .btn { min-height: 48px; }
.ts-menu .addr { color: var(--yellow); --sh: #3f3f15; }
.ts-menu .btn:hover .addr { color: #ffffa0; }
.ts-chat { list-style: none; margin: auto 0 0; padding: 32px 0 0; align-self: flex-start; width: min(560px, 100%); display: grid; gap: 0; }
.ts-chat li { background: rgba(0, 0, 0, 0.5); padding: 2px 8px; color: #fff; --sh: #3f3f3f; }
.js .ts-chat li { opacity: 0; transform: translateY(8px); transition: opacity 0.3s steps(3), transform 0.3s steps(3); }
.js .ts-chat li.in { opacity: 1; transform: none; }
.ts-corner { position: absolute; bottom: 12px; margin: 0; color: #fff; --sh: #3f3f3f; pointer-events: none; }
.ts-left { left: 16px; }
.ts-right { right: 16px; text-align: right; }
.ts-kills { position: absolute; top: 16px; left: 16px; margin: 0; color: var(--gray); --sh: #2a2a2a; }
.ts-kills b { color: var(--red); --sh: #3f1515; }
.ts-hint { position: absolute; top: 16px; right: 16px; margin: 0; color: var(--gray); --sh: #2a2a2a; pointer-events: none; }
@media (max-width: 700px) {
  .splash { font-size: 16px; line-height: 24px; right: -1%; top: 40%; }
  .ts-in { padding: 40px 16px 72px; }
  .ts-corner { font-size: 16px; }
  .ts-right { display: none; }
  .ts-hint { display: none; }
}

.og .top, .og .ts-chat, .og .ts-hint, .og .ts-kills, .og .ts-right, .og .sidebar, .og .toasts { display: none !important; }
.og .ts { min-height: 100vh; }
.og .ts-in { justify-content: center; padding-bottom: 72px; }

/* ---- The grass you can dig ---- */
.ground { display: flex; height: 64px; overflow: hidden; background: url(/assets/tex/night_grass.png?v=30ca89b3a5) 0 0 / 64px repeat-x; position: relative; z-index: 3; }
.ground.live { background: none; }
.blk { flex: none; width: 64px; height: 64px; position: relative; background-size: 64px; cursor: url(/assets/tex/cursor_pick.png?v=30ca89b3a5) 4 4, pointer; touch-action: pan-y; -webkit-touch-callout: none; user-select: none; }
.blk::after { content: ''; position: absolute; inset: 0; background: url(/assets/tex/cracks.png?v=30ca89b3a5) 0 0 / 640px 64px no-repeat; background-position-x: calc(var(--stage, -1) * -64px); opacity: 0; }
.blk.mining::after { opacity: 1; }
.blk.gone { background: none !important; cursor: url(/assets/tex/cursor_pick.png?v=30ca89b3a5) 4 4, cell; }
.blk.gone:hover { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35); }
.t-night_grass { background-image: url(/assets/tex/night_grass.png?v=30ca89b3a5); }
.t-dirt { background-image: url(/assets/tex/dirt.png?v=30ca89b3a5); }
.t-stone { background-image: url(/assets/tex/stone.png?v=30ca89b3a5); }
.t-deepslate { background-image: url(/assets/tex/deepslate.png?v=30ca89b3a5); }
.t-coal_ore { background-image: url(/assets/tex/coal_ore.png?v=30ca89b3a5); } .t-iron_ore { background-image: url(/assets/tex/iron_ore.png?v=30ca89b3a5); }
.t-gold_ore { background-image: url(/assets/tex/gold_ore.png?v=30ca89b3a5); } .t-redstone_ore { background-image: url(/assets/tex/redstone_ore.png?v=30ca89b3a5); }
.t-diamond_ore { background-image: url(/assets/tex/diamond_ore.png?v=30ca89b3a5); } .t-emerald_ore { background-image: url(/assets/tex/emerald_ore.png?v=30ca89b3a5); }
.t-lapis_ore { background-image: url(/assets/tex/lapis_ore.png?v=30ca89b3a5); }
.t-deep_coal_ore { background-image: url(/assets/tex/deep_coal_ore.png?v=30ca89b3a5); } .t-deep_iron_ore { background-image: url(/assets/tex/deep_iron_ore.png?v=30ca89b3a5); }
.t-deep_gold_ore { background-image: url(/assets/tex/deep_gold_ore.png?v=30ca89b3a5); } .t-deep_redstone_ore { background-image: url(/assets/tex/deep_redstone_ore.png?v=30ca89b3a5); }
.t-deep_diamond_ore { background-image: url(/assets/tex/deep_diamond_ore.png?v=30ca89b3a5); } .t-deep_emerald_ore { background-image: url(/assets/tex/deep_emerald_ore.png?v=30ca89b3a5); }
.t-deep_lapis_ore { background-image: url(/assets/tex/deep_lapis_ore.png?v=30ca89b3a5); }
/* ore blocks set into the walls beside the content on wide screens */
.ore { position: absolute; z-index: 1; width: 64px; height: 64px; filter: brightness(0.75); }
.ore:hover { filter: none; }
.bit { position: fixed; z-index: 80; width: 12px; height: 12px; pointer-events: none; background-size: 64px; }

/* ---- Sidebar scoreboard, centre right, as servers show it in game ---- */
.sidebar { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 30; width: 236px; background: rgba(0, 0, 0, 0.32); color: #fff; --sh: #3f3f3f; }
.sidebar-t { margin: 0; padding: 2px 8px; background: rgba(0, 0, 0, 0.42); text-align: center; }
.sidebar ul { list-style: none; margin: 0; padding: 2px 8px 6px; }
.sidebar li { min-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-x { position: absolute; top: 0; left: -26px; width: 26px; height: 28px; padding: 0; border: 0; background: rgba(0, 0, 0, 0.42); color: var(--gray); --sh: #2a2a2a; font: 16px/24px var(--mc); cursor: pointer; }
.sidebar-x:hover, .sidebar-x:focus-visible { color: #ffffa0; }
.sidebar.closed { transform: translate(100%, -50%); }
.sidebar.closed .sidebar-x { left: -26px; }
@media (max-width: 1579px) { .sidebar { display: none; } }
.tabs .btn .ico { width: 32px; height: 32px; margin: -4px 0; }

/* ---- Multiplayer screen ---- */
.bossbars { display: grid; gap: 14px; justify-items: center; margin-bottom: 28px; }
.boss { width: min(560px, 100%); text-align: center; color: #fff; --sh: #3f3f3f; text-decoration: none; display: block; }
a.boss:hover { color: #ffffa0; }
.boss-bar { position: relative; height: 12px; margin-top: 4px; background: #2f0b0b; box-shadow: inset 0 2px 0 #4b1515, inset 0 -2px 0 #1a0404; }
.boss-bar span { display: block; height: 100%; width: 0; background: #e2392d; box-shadow: inset 0 2px 0 #ff8a7d, inset 0 -2px 0 #a3201a; transition: width 0.8s steps(10); }
.boss-bar::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(0, 0, 0, 0.55) calc(10% - 2px) 10%); }
.boss.yellow .boss-bar { background: #2e2a08; box-shadow: inset 0 2px 0 #4a4512, inset 0 -2px 0 #171503; }
.boss.yellow .boss-bar span { background: #e8d53a; box-shadow: inset 0 2px 0 #fff59a, inset 0 -2px 0 #a59416; }
.boss.yellow .boss-bar::after { display: none; }
.boss.urgent .boss-bar span { animation: urgent 0.8s steps(2) infinite; }
@keyframes urgent { 50% { filter: brightness(1.6); } }

.servers { width: min(760px, 100%); margin: 0 auto; }
.entry { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 0 12px; align-items: start; padding: 6px; background: rgba(0, 0, 0, 0.55); border: 2px solid #a0a0a0; box-shadow: inset 0 0 0 2px #000; }
.entry img { width: 64px; height: 64px; }
.entry-name { margin: 0; color: #fff; --sh: #3f3f3f; }
.entry-motd { margin: 0; color: var(--gray); --sh: #2a2a2a; min-height: 48px; overflow-wrap: anywhere; }
.entry-side { display: flex; align-items: center; gap: 10px; color: var(--gray); --sh: #2a2a2a; white-space: nowrap; }
.servers .btn-row { margin-top: 12px; }
.servers .btn-row .btn { flex: 1 1 auto; white-space: nowrap; }
@media (max-width: 520px) {
  .entry { grid-template-columns: 48px minmax(0, 1fr); }
  .entry img { width: 48px; height: 48px; }
  .entry-side { grid-column: 1 / -1; justify-content: flex-end; margin-top: 4px; }
}
.mp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 32px; align-items: start; }
@media (max-width: 760px) { .mp-grid { grid-template-columns: 1fr; } }
.mp-grid h3 { margin-bottom: 8px; }

/* player list (TAB) */
.tablist { list-style: none; margin: 0; padding: 2px; background: rgba(0, 0, 0, 0.55); display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px; }
.tablist li { display: flex; align-items: center; gap: 8px; padding: 2px 6px 2px 2px; background: rgba(255, 255, 255, 0.12); color: #fff; --sh: #3f3f3f; min-width: 0; }
.tablist li span:not(.head) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tablist li.empty { grid-column: 1 / -1; background: none; color: var(--gray); padding: 6px 8px; }
.head { width: 24px; height: 24px; flex-shrink: 0; background: #3a3a3a; image-rendering: pixelated; }
.head-blank { display: inline-block; }

/* debug screen lines */
.f3 { list-style: none; margin: 0; padding: 0; }
.f3 li { display: table; margin-bottom: 2px; padding: 0 4px; background: rgba(80, 80, 80, 0.56); color: #e0e0e0; --sh: transparent; }
.f3 li b { color: #fff; font-weight: 400; }
.f3 .warn { color: var(--yellow); }

/* ---- This week ---- */
.goal-bar { position: relative; height: 20px; margin: 14px 0 8px; background: #000; box-shadow: inset 0 0 0 2px #000; }
.goal-bar span { display: block; height: 100%; width: 0; background: linear-gradient(#b8ff6b 0 4px, #80ff20 4px 12px, #4f9e12 12px); transition: width 1s steps(18); }
.goal-bar::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(5.555% - 2px), #000 calc(5.555% - 2px) 5.555%); }
.goal-level { text-align: center; color: #80ff20; --sh: transparent; font-size: 24px; line-height: 32px; margin: 0;
  text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000; }
.goal.done .goal-level { color: var(--yellow); }

.c-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.c-list li { display: flex; align-items: center; gap: 12px; }
.c-main { flex: 1; min-width: 0; }
.c-main strong { display: block; overflow-wrap: anywhere; }
.c-main span { color: #4a4a4a; }
.reward { color: #145a14; white-space: nowrap; font-weight: 700; }
.c-list .empty { color: #4a4a4a; }

/* scoreboard sidebar */
.sb { background: rgba(0, 0, 0, 0.3); min-width: 0; }
.sb-title { margin: 0; padding: 6px 10px; background: rgba(0, 0, 0, 0.45); text-align: center; color: #fff; --sh: #3f3f3f; font-size: 16px; line-height: 24px; font-weight: 400; }
.sb-title.c-c { color: var(--red); --sh: #3f1515; }
.sb ol { list-style: none; margin: 0; padding: 6px 10px 10px; display: grid; gap: 4px; }
.sb li { display: flex; align-items: center; gap: 10px; color: #fff; --sh: #3f3f3f; min-width: 0; }
.sb .rank { width: 32px; text-align: right; color: var(--gray); --sh: #2a2a2a; flex-shrink: 0; }
.sb .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb .val { color: var(--red); --sh: #3f1515; white-space: nowrap; }
.sb .top1 .rank { color: var(--gold); --sh: #3f2a00; } .sb .top2 .rank { color: #e0e0e0; } .sb .top3 .rank { color: #d08a52; }
.sb li.empty { color: var(--gray); --sh: #2a2a2a; display: block; padding: 6px 0; }

/* activity chart: one bar per hour, last 7 days */
.chart { display: flex; align-items: flex-end; gap: 1px; height: 120px; padding: 4px 0 0; border-bottom: 2px solid #555; overflow: hidden; }
.chart i { flex: 1; min-width: 0; background: transparent; }
@media (max-width: 600px) { .chart { gap: 0; } }
.chart i.up { background: #4a1d1d; min-height: 4px; }
.chart i.on { background: var(--red); box-shadow: inset 0 2px 0 #ff9a9a; min-height: 4px; }
.chart-axis { display: flex; justify-content: space-between; color: var(--gray); --sh: #2a2a2a; margin-top: 4px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--gray); --sh: #2a2a2a; margin-top: 10px; }
.chart-legend span::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 6px; background: var(--red); vertical-align: -1px; }
.chart-legend span.up::before { background: #4a1d1d; }

/* ---- Hotbar of features ---- */
.hotbar-wrap { display: grid; justify-items: center; gap: 12px; }
.held { min-height: 24px; margin: 0; color: #fff; --sh: #3f3f3f; transition: opacity 0.4s; }
.held.fade { opacity: 0; transition: opacity 1.2s 1.6s; }
.hotbar { display: inline-flex; padding: 2px; background: rgba(0, 0, 0, 0.6); border: 2px solid #000; box-shadow: inset 0 0 0 2px #5e5e5e; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.hotbar::-webkit-scrollbar { display: none; }
.hb { position: relative; width: 64px; height: 64px; flex-shrink: 0; display: grid; place-items: center; padding: 0; border: 0; background: rgba(139, 139, 139, 0.25); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.5), inset -2px -2px 0 rgba(255, 255, 255, 0.18); cursor: pointer; }
.hb:hover { background: rgba(255, 255, 255, 0.18); }
.hb[aria-selected='true'] { box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 6px #000; background: rgba(139, 139, 139, 0.35); }
.hb .num { position: absolute; right: 4px; bottom: 0; color: #fff; --sh: #3f3f3f; line-height: 20px; }
.hb:focus-visible { outline-offset: -6px; }
.hb-panels { width: min(640px, 100%); }
.js .hb-panels > .tip:not(.on) { display: none; }
.no-js .hb-panels { display: grid; gap: 12px; }
.hb-panels .tip { animation: pop 0.25s steps(3); }
@keyframes pop { from { transform: scale(0.94); opacity: 0.4; } }
@media (max-width: 480px) { .hb { width: min(52px, calc((100vw - 48px) / 7)); height: min(52px, calc((100vw - 48px) / 7)); } .hb .ico-l { width: 32px; height: 32px; } }

.cta-box { text-align: center; display: grid; justify-items: center; gap: 8px; }
.cta-box .btn-wide { width: min(420px, 100%); }

/* ---- Page heads ---- */
.page-head { padding: 64px 0 72px; text-align: center; }
.page-head h1 { margin-bottom: 12px; }
.page-head .lead { color: var(--gray); --sh: #2a2a2a; max-width: 760px; margin: 0 auto; }
.page-head .slot { display: grid; margin: 0 auto 16px; }
.page-head .slot .ico { margin: 0; }
.screen-title:not(:has(+ .screen-sub)) { margin-bottom: 24px; }
.toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; }

/* Direct connection box */
.connect { width: min(560px, 100%); margin: 32px auto 0; text-align: left; }
.connect label, .connect .label { display: block; color: #a0a0a0; --sh: #282828; margin-bottom: 4px; }
.connect-row { display: flex; gap: 8px; }
.tf { flex: 1; min-width: 0; height: 44px; padding: 0 10px; display: flex; align-items: center; font: 16px/24px var(--mc); color: #e0e0e0; --sh: #383838; background: #000; border: 2px solid #a0a0a0; overflow: hidden; white-space: nowrap; }
input.tf { width: 100%; caret-color: #e0e0e0; }
input.tf:focus { border-color: #fff; outline: none; }
input.tf::placeholder { color: #707070; }
.tf code { background: none; padding: 0; color: #e0e0e0; --sh: #383838; }
@media (max-width: 359px) { .connect-row { flex-wrap: wrap; } .connect-row .tf { flex-basis: 100%; } .connect-row .btn { flex: 1; } }

/* ---- Join ---- */
.dl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 960px) { .dl-grid { grid-template-columns: 1fr; } }
.dl { display: flex; flex-direction: column; }
.dl .panel-title { margin-bottom: 10px; }
.dl p { flex: 1; }
.dl .btn { margin-top: 12px; align-self: stretch; flex-wrap: wrap; white-space: nowrap; row-gap: 0; }
.dl .kicker { color: #4a4a4a; margin: 0; }

/* advancement chain */
.adv { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: step; }
@media (max-width: 960px) { .adv { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .adv { grid-template-columns: 1fr; } }
.adv li { position: relative; counter-increment: step; }
.adv-frame { position: relative; width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 14px; background: #c6c6c6; border: 2px solid #000; box-shadow: inset 4px 4px 0 #fff, inset -4px -4px 0 #555; }
.adv-frame::after { content: counter(step); position: absolute; right: -10px; bottom: -10px; width: 28px; height: 28px; display: grid; place-items: center; background: #000; border: 2px solid #fff; color: #fff; --sh: transparent; line-height: 16px; }
.adv li:not(:last-child)::before { content: ''; position: absolute; left: 72px; right: -24px; top: 30px; height: 4px; background: #fff; box-shadow: 0 2px 0 #000, 0 -2px 0 #000; }
@media (max-width: 960px) { .adv li:nth-child(2n)::before { display: none; } }
@media (max-width: 560px) { .adv li::before { display: none; } }
.adv h3 { color: var(--yellow); --sh: #3f3f15; }
.adv p { color: var(--gray); --sh: #2a2a2a; }

.chat-tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.chat-tips li { background: rgba(0, 0, 0, 0.55); padding: 6px 10px; color: #fff; --sh: #3f3f3f; }
.chat-tips .tag { color: var(--gold); --sh: #3f2a00; }

/* key-binds style rows: a label and a button-like answer */
.binds { display: grid; gap: 6px; }
.bind { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px; align-items: center; padding: 6px 8px; background: rgba(0, 0, 0, 0.4); }
.bind dt { color: #fff; --sh: #3f3f3f; }
.bind dd { margin: 0; padding: 6px 12px; color: #e0e0e0; --sh: transparent; background: rgba(80, 80, 80, 0.56); }
@media (max-width: 640px) { .bind { grid-template-columns: 1fr; } }

/* ---- Guide ---- */
.tip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 960px) { .tip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tip-grid { grid-template-columns: 1fr; } }
.tip-grid .tip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: start; align-content: start; }
.tip-grid .tip .slot { grid-row: span 2; }
.tip-grid .tip h3 { margin: 6px 0 0; }

.open-book { display: grid; grid-template-columns: 1fr 1fr; gap: 0; filter: drop-shadow(8px 8px 0 rgba(0, 0, 0, 0.45)); }
@media (max-width: 760px) { .open-book { grid-template-columns: 1fr; gap: 16px; } }
.page { --sh: transparent; color: #1e1e1e; background: #ece2c4 url(/assets/tex/paper.png?v=30ca89b3a5) 0 0 / 64px; border: 4px solid #4a3017; padding: 28px 28px 32px; min-width: 0; }
.page + .page { border-left-width: 2px; }
@media (max-width: 760px) { .page + .page { border-left-width: 4px; } }
.page h2, .page h3, .page strong, .page b { color: #000; --sh: transparent; }
.page .page-no { text-align: right; color: #6b5a3a; margin-bottom: 12px; }
.page code { color: #5a1d9a; --sh: transparent; background: rgba(0, 0, 0, 0.06); }
.page ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.page li::before { content: '\2192  '; color: #6b5a3a; }
.page .muted { color: #5b4d33; --sh: transparent; }

.cmds { width: 100%; border-collapse: separate; border-spacing: 0 2px; }
.cmds th { text-align: left; color: var(--gray); --sh: #2a2a2a; font-weight: 400; padding: 0 10px 6px; }
.cmds td { background: rgba(0, 0, 0, 0.55); padding: 6px 10px; vertical-align: top; color: #fff; }
.cmds td:first-child { width: 44%; color: var(--yellow); --sh: #3f3f15; }
.cmds td code { background: none; padding: 0; }
@media (max-width: 640px) {
  .cmds thead { display: none; }
  .cmds tr, .cmds td { display: block; width: auto !important; }
  .cmds tr { margin-bottom: 8px; }
  .cmds td:first-child { padding-bottom: 0; }
}

.sign { --sh: transparent; color: #140d05; background: linear-gradient(rgba(186, 154, 102, 0.62), rgba(186, 154, 102, 0.62)), #9c7f4e url(/assets/tex/planks.png?v=30ca89b3a5) 0 0 / 64px; border: 4px solid #3f2c19; box-shadow: inset 0 0 0 2px #b4945f, 8px 8px 0 rgba(0, 0, 0, 0.45); padding: 24px 28px; max-width: 820px; margin: 0 auto; }
.sign ol { margin: 0; padding: 0; list-style: none; counter-reset: rule; display: grid; gap: 10px; }
.sign li { counter-increment: rule; display: grid; grid-template-columns: 32px 1fr; gap: 8px; }
.sign li::before { content: counter(rule) '.'; }
.sign-post { width: 16px; height: 48px; margin: 0 auto; background: url(/assets/tex/dark_planks.png?v=30ca89b3a5) 0 0 / 64px; border: 2px solid #2b1d0f; border-top: 0; }

/* ---- Leaderboards ---- */
.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 40px; }
.tabs .btn { min-height: 40px; }
.tabs .btn[aria-selected='true'] { color: #fff; --sh: #3f3f3f; background-color: #2c2c2c; background-image: url(/assets/tex/btn_off.png?v=30ca89b3a5); box-shadow: inset 2px 2px 0 #3a3a3a, inset -2px -2px 0 #1a1a1a; border-color: #fff; }
.board-head { text-align: center; margin-bottom: 24px; }
.board-head h2 { margin-bottom: 4px; }
.board-head p { color: var(--gray); --sh: #2a2a2a; margin: 0; }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 200px)); justify-content: center; align-items: end; gap: 12px; margin: 0 auto 32px; }
.pod { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.pod.p1 { order: 2; } .pod.p2 { order: 1; } .pod.p3 { order: 3; }
.pod-tag { max-width: 100%; padding: 2px 8px; background: rgba(0, 0, 0, 0.4); color: #fff; --sh: #3f3f3f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-val { color: var(--yellow); --sh: #3f3f15; margin: 2px 0 6px; white-space: nowrap; }
.pod-skin { height: 160px; width: auto; margin-bottom: -2px; image-rendering: pixelated; animation: idle 3s ease-in-out infinite; }
.pod-skin.blank { width: 64px; background: none; }
@keyframes idle { 50% { transform: translateY(-3px); } }
.pod-block { width: 100%; display: grid; place-items: center; background-size: 64px; border: 2px solid #000; color: #000; --sh: transparent; font-size: 32px; line-height: 40px; }
.p1 .pod-block { height: 192px; background-image: url(/assets/tex/gold.png?v=30ca89b3a5); color: #6b4a00; }
.p2 .pod-block { height: 128px; background-image: url(/assets/tex/iron.png?v=30ca89b3a5); color: #4a4a4a; }
.p3 .pod-block { height: 80px; background-image: url(/assets/tex/copper.png?v=30ca89b3a5); color: #4a1d0a; }
.pod.empty .pod-skin { visibility: hidden; }
@media (max-width: 560px) { .pod-tag { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; text-align: center; } .pod-skin { height: 110px; } .p1 .pod-block { height: 128px; } .p2 .pod-block { height: 88px; } .p3 .pod-block { height: 56px; } .podium { gap: 6px; } }
.board-list { width: min(640px, 100%); margin: 0 auto; }
.board-list .sb ol { counter-reset: none; }
.updated { text-align: center; color: var(--gray); --sh: #2a2a2a; margin-top: 16px; }

/* ---- Market ---- */
.market-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 24px; }
.market-bar .field { flex: 1 1 280px; display: flex; }
.market-bar .btn { flex: 0 1 auto; }
.market-bar .updated { margin: 0 0 0 auto; }
.listings { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.listing { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; gap: 2px 14px; align-items: start; align-content: start; }
.listing .slot { grid-row: span 3; }
.listing h3 { margin: 0; overflow-wrap: anywhere; color: #fff; font-weight: 400; }
.listing .price { color: var(--green); --sh: #153f15; }
.listing .each { color: var(--gray); }
.listing .id { color: #8b8b8b; --sh: #222; overflow-wrap: anywhere; }
.listing .meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 2px solid rgba(255, 255, 255, 0.08); color: var(--gray); }
.listing .meta > span:not(.ends):not(.head) { flex: 1 0 auto; max-width: calc(100% - 32px); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listing .meta .ends { margin-left: auto; color: #8b8b8b; --sh: #222; }
.listings > .empty { grid-column: 1 / -1; text-align: center; }

/* ---- You died (404) ---- */
.died { min-height: calc(100svh - 66px); display: grid; place-items: center; text-align: center; background: linear-gradient(rgba(80, 0, 0, 0.5), rgba(150, 0, 0, 0.55)), #18181b url(/assets/tex/bg_deepslate.png?v=30ca89b3a5) 0 0 / 64px; padding: 48px 16px 96px; }
.died h1 { font-size: 64px; line-height: 72px; margin-bottom: 24px; }
.died .score { color: #fff; margin-bottom: 40px; }
.died .score b { color: var(--yellow); --sh: #3f3f15; }
.died .ts-menu { margin: 0 auto; }
@media (max-width: 600px) { .died h1 { font-size: 40px; line-height: 48px; } }

/* ---- Footer ---- */
.foot { padding: 72px 0 40px; }
.foot-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; }
.foot p { margin: 0 0 6px; color: var(--gray); --sh: #2a2a2a; }
.foot-brand { color: #fff !important; --sh: #3f3f3f !important; font-size: 24px; line-height: 32px; margin-bottom: 12px !important; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 8px; align-content: start; justify-content: flex-end; }
.foot-nav .btn { min-height: 36px; padding: 2px 12px; }
.legal { grid-column: 1 / -1; padding-top: 16px; border-top: 2px solid rgba(255, 255, 255, 0.08); color: var(--gray) !important; --sh: #2a2a2a !important; }
.legal a { white-space: nowrap; }
@media (max-width: 1100px) { .foot-in { grid-template-columns: 1fr; } .foot-nav { justify-content: flex-start; } }

/* ---- Toasts ---- */
.toasts { position: fixed; top: 80px; right: 12px; z-index: 70; display: grid; gap: 8px; pointer-events: none; }
.toast { width: min(340px, calc(100vw - 24px)); display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 12px; background: #212121; border: 2px solid #000; box-shadow: inset 2px 2px 0 #555, inset -2px -2px 0 #0e0e0e, 4px 4px 0 rgba(0, 0, 0, 0.4); animation: toast-in 0.4s steps(5) both; }
.toast.out { animation: toast-out 0.4s steps(5) both; }
.toast p { margin: 0; line-height: 22px; }
.toast .t-title { color: var(--yellow); --sh: #3f3f15; }
.toast .t-title.purple { color: #ff55ff; --sh: #3f153f; }
.toast .t-text { color: #fff; --sh: #3f3f3f; }
@keyframes toast-in { from { transform: translateX(110%); } }
@keyframes toast-out { to { transform: translateX(110%); } }

/* scroll-in: sections arrive in a few chunky steps */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.45s steps(4), transform 0.45s steps(4); }
.js .reveal.in { opacity: 1; transform: none; }

/* the 404 page stays red down to the bedrock */
body[data-page='notfound'] .foot.e-deep::before { background-image: linear-gradient(rgba(150, 0, 0, 0.55), transparent 50%), url(/assets/tex/edge_deepslate_bedrock.png?v=30ca89b3a5); }

/* generated by build.mjs */
.ico{background-image:url(/assets/tex/icons.png?v=30ca89b3a5);background-size:2800% 100%}
.i-zombie{background-position:0.0000% 0}
.i-sword{background-position:3.7037% 0}
.i-gun{background-position:7.4074% 0}
.i-shield{background-position:11.1111% 0}
.i-bell{background-position:14.8148% 0}
.i-heart{background-position:18.5185% 0}
.i-apple{background-position:22.2222% 0}
.i-goldapple{background-position:25.9259% 0}
.i-pick{background-position:29.6296% 0}
.i-ingot{background-position:33.3333% 0}
.i-armor{background-position:37.0370% 0}
.i-crate{background-position:40.7407% 0}
.i-chest{background-position:44.4444% 0}
.i-bill{background-position:48.1481% 0}
.i-paper{background-position:51.8519% 0}
.i-book{background-position:55.5556% 0}
.i-map{background-position:59.2593% 0}
.i-door{background-position:62.9630% 0}
.i-log{background-position:66.6667% 0}
.i-walkie{background-position:70.3704% 0}
.i-arrow{background-position:74.0741% 0}
.i-play{background-position:77.7778% 0}
.i-ram{background-position:81.4815% 0}
.i-food{background-position:85.1852% 0}
.i-potion{background-position:88.8889% 0}
.i-target{background-position:92.5926% 0}
.i-clock{background-position:96.2963% 0}
.i-compass{background-position:100.0000% 0}