/* Craft Survivors — the Minecraft Java Edition interface.
   Every sprite comes from the Minecraft files of the game server (see js/mcassets.js): the --mc-* variables
   are set once the resources are loaded. --s is the GUI scale: one Minecraft GUI pixel in CSS pixels. */
:root {
  --s: 2px;
  --font: 'Minecraft Craft', 'Consolas', 'Courier New', monospace;
  --sh: var(--s) var(--s) 0 #3f3f3f;
  --white: #ffffff; --gray: #aaaaaa; --dgray: #555555; --black: #000000;
  --yellow: #ffff55; --gold: #ffaa00; --green: #55ff55; --dgreen: #00aa00; --aqua: #55ffff; --daqua: #00aaaa;
  --red: #ff5555; --dred: #aa0000; --lpurple: #ff55ff; --dpurple: #aa00aa; --blue: #5555ff;
  --win-text: #404040;
  --xp: #80ff20;
}
@media (min-width: 1280px) and (min-height: 760px) { :root { --s: 3px; } }
@media (min-width: 2400px) and (min-height: 1300px) { :root { --s: 4px; } }
@media (max-width: 700px), (max-height: 480px) { :root { --s: 1.5px; } }

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #000; color: var(--white);
  font-family: var(--font); font-size: calc(8 * var(--s)); line-height: calc(9 * var(--s));
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: none;
  text-shadow: var(--sh);
}
button, input { font: inherit; }
.hidden { display: none !important; }
.gray { color: var(--gray); text-shadow: var(--s) var(--s) 0 #2a2a2a; }
.dgray { color: var(--dgray); }
.yellow { color: var(--yellow); text-shadow: var(--s) var(--s) 0 #3f3f15; }
.gold { color: var(--gold); text-shadow: var(--s) var(--s) 0 #2a2a00; }
.green { color: var(--green); text-shadow: var(--s) var(--s) 0 #153f15; }
.aqua { color: var(--aqua); text-shadow: var(--s) var(--s) 0 #153f3f; }
.red { color: var(--red); text-shadow: var(--s) var(--s) 0 #3f1515; }
.lpurple { color: var(--lpurple); text-shadow: var(--s) var(--s) 0 #3f153f; }
.blue { color: var(--blue); text-shadow: var(--s) var(--s) 0 #15153f; }
img.ico { image-rendering: pixelated; width: calc(16 * var(--s)); height: calc(16 * var(--s)); vertical-align: middle; }
img.ico.mini { width: calc(8 * var(--s)); height: calc(8 * var(--s)); }

#gl, #overlay { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#overlay { pointer-events: none; z-index: 2; }
#vignette { position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: 0; background: radial-gradient(ellipse at center, rgba(255, 0, 0, 0) 45%, rgba(200, 0, 0, 0.5) 100%); }
#vignette.hurt { animation: hurt 0.35s ease-out; }
@keyframes hurt { from { opacity: 1; } to { opacity: 0; } }

/* ---------------------------------------------------------------- widgets */
.mc-btn {
  height: calc(20 * var(--s)); padding: 0 calc(2 * var(--s)); margin: 0;
  border: calc(3 * var(--s)) solid transparent; border-image: var(--mc-btn) 3 fill / calc(3 * var(--s)) stretch; background: none;
  image-rendering: pixelated; color: var(--white); text-shadow: var(--sh); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: calc(3 * var(--s)); white-space: nowrap; overflow: hidden; outline: none;
}
.mc-btn:hover:not(:disabled), .mc-btn:focus-visible { border-image-source: var(--mc-btn-hover); color: #ffffa0; text-shadow: var(--s) var(--s) 0 #3f3f28; }
.mc-btn:disabled { border-image-source: var(--mc-btn-off); color: #a0a0a0; text-shadow: none; cursor: default; }
.w200 { width: calc(200 * var(--s)); }
.w150 { width: calc(150 * var(--s)); }
.w98 { width: calc(98 * var(--s)); }
.mc-btn.sq { width: calc(20 * var(--s)); padding: 0; }
.mc-btn .cost { display: inline-flex; align-items: center; gap: var(--s); color: var(--green); text-shadow: var(--s) var(--s) 0 #153f15; }
.mc-btn:disabled .cost { color: #a0a0a0; text-shadow: none; }
.mc-btn .cost img { width: calc(8 * var(--s)); height: calc(8 * var(--s)); image-rendering: pixelated; }

.mc-field {
  height: calc(20 * var(--s)); padding: 0 calc(4 * var(--s)); border: var(--s) solid transparent;
  border-image: var(--mc-field) 1 fill / var(--s) stretch; background: none; image-rendering: pixelated;
  color: #e0e0e0; text-shadow: var(--sh); outline: none; user-select: text; -webkit-user-select: text;
}
.mc-field:focus { border-image-source: var(--mc-field-hover); color: #fff; }
.mc-field::placeholder { color: #707070; }
.mc-field.code { text-transform: uppercase; letter-spacing: calc(2 * var(--s)); text-align: center; }
.mc-label { color: var(--gray); text-shadow: var(--s) var(--s) 0 #2a2a2a; }

.mc-slider {
  position: relative; height: calc(20 * var(--s)); border: var(--s) solid transparent; border-image: var(--mc-slider) 1 fill / var(--s) stretch;
  image-rendering: pixelated; cursor: pointer; touch-action: none; outline: none;
}
.mc-slider:hover, .mc-slider:focus-visible { border-image-source: var(--mc-slider-hover); }
.mc-slider .handle { position: absolute; top: calc(-1 * var(--s)); width: calc(8 * var(--s)); height: calc(20 * var(--s)); background: var(--mc-handle) 0 0 / 100% 100%; image-rendering: pixelated; }
.mc-slider:hover .handle, .mc-slider.drag .handle { background-image: var(--mc-handle-hover); }
.mc-slider .label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; white-space: nowrap; pointer-events: none; }
.mc-slider:hover .label { color: #ffffa0; }

/* Inventory window (light gray, like a chest) */
.mc-window {
  position: relative; border: calc(4 * var(--s)) solid transparent; border-image: var(--mc-window) 4 fill / calc(4 * var(--s)) stretch;
  image-rendering: pixelated; padding: calc(2 * var(--s)) calc(3 * var(--s)) calc(3 * var(--s)); color: var(--win-text); text-shadow: none;
}
.win-title { color: var(--win-text); text-shadow: none; margin: calc(2 * var(--s)) 0 calc(3 * var(--s)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-note { color: var(--win-text); text-shadow: none; }
.slot-grid { display: grid; grid-template-columns: repeat(9, calc(18 * var(--s))); }
.slot {
  position: relative; width: calc(18 * var(--s)); height: calc(18 * var(--s)); background: var(--mc-slot) 0 0 / 100% 100%; image-rendering: pixelated;
}
.slot > img { position: absolute; left: var(--s); top: var(--s); width: calc(16 * var(--s)); height: calc(16 * var(--s)); image-rendering: pixelated; }
.slot > img.portrait { image-rendering: auto; }
.slot > img.locked { filter: brightness(0); opacity: 0.55; }
.slot .count { position: absolute; right: 0; bottom: calc(-1 * var(--s)); color: var(--white); text-shadow: var(--sh); pointer-events: none; }
.slot:hover::after, .slot.sel::after { content: ''; position: absolute; left: var(--s); top: var(--s); width: calc(16 * var(--s)); height: calc(16 * var(--s)); background: rgba(255, 255, 255, 0.5); pointer-events: none; }
.slot.fused > img { width: calc(12 * var(--s)); height: calc(12 * var(--s)); }
.slot.fused > img.fuse2 { left: auto; top: auto; right: var(--s); bottom: var(--s); }
.slot.glint::before { content: ''; position: absolute; inset: var(--s); pointer-events: none; mix-blend-mode: screen; opacity: 0.6; background: linear-gradient(115deg, transparent 30%, rgba(170, 80, 255, 0.8) 45%, transparent 60%) 0 0 / 300% 300%; animation: glint 2.4s linear infinite; }
@keyframes glint { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.slot.pop { animation: pop 0.25s ease-out both; }
@keyframes pop { from { transform: scale(0.3); opacity: 0; } to { transform: none; opacity: 1; } }
.slot.rar3 > img { filter: drop-shadow(0 0 calc(2 * var(--s)) rgba(255, 85, 255, 0.9)); }
.slot.rar4 > img { filter: drop-shadow(0 0 calc(3 * var(--s)) rgba(255, 170, 0, 1)); }

/* Tooltip (dark purple) */
.mc-tooltip { position: relative; background: rgba(16, 0, 16, 0.94); padding: calc(4 * var(--s)) calc(5 * var(--s)); color: var(--white); }
.mc-tooltip::before {
  content: ''; position: absolute; inset: var(--s); pointer-events: none;
  border: var(--s) solid; border-image: linear-gradient(rgba(80, 0, 255, 0.55), rgba(40, 0, 127, 0.55)) 1;
}
.tip-title { margin-bottom: calc(2 * var(--s)); }
.tip-sep { height: calc(3 * var(--s)); }
#mc-tip { position: fixed; z-index: 200; pointer-events: none; max-width: calc(200 * var(--s)); }
#mc-tip div { white-space: normal; }

/* List rows (world list / server list) */
.mc-list { display: flex; flex-direction: column; gap: calc(2 * var(--s)); overflow-y: auto; padding: calc(2 * var(--s)); }
.mc-entry { display: flex; align-items: center; gap: calc(4 * var(--s)); padding: calc(2 * var(--s)); border: var(--s) solid transparent; min-height: calc(36 * var(--s)); line-height: calc(9 * var(--s)); }
.mc-entry > img { width: calc(32 * var(--s)); height: calc(32 * var(--s)); flex: none; }
.mc-entry .lines { min-width: 0; flex: 1; }
.mc-entry .lines > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.mc-entry { background: none; color: inherit; text-align: left; cursor: pointer; width: 100%; outline: none; }
button.mc-entry:hover { border-color: #808080; }
button.mc-entry.sel { border-color: #fff; background: rgba(0, 0, 0, 0.5); }
.mc-list::-webkit-scrollbar { width: calc(6 * var(--s)); }
.mc-list::-webkit-scrollbar-track { background: #000; }
.mc-list::-webkit-scrollbar-thumb { background: #808080; border-right: var(--s) solid #c0c0c0; border-bottom: var(--s) solid #c0c0c0; }

/* ---------------------------------------------------------------- screens */
.screen { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; }
.screen.menu { background: var(--mc-menu-bg) 0 0 / calc(16 * var(--s)) repeat; image-rendering: pixelated; backdrop-filter: blur(calc(3 * var(--s))); }
/* Screens showing a 3D subject (hero, Ender Chest) keep the scene sharp. */
#screen-heroes, #screen-gacha { backdrop-filter: none; background: none; }
#screen-heroes .mc-head, #screen-heroes .mc-foot, #screen-gacha .mc-head, #screen-gacha .mc-foot { background: var(--mc-menu-bg) 0 0 / calc(16 * var(--s)) repeat, rgba(0, 0, 0, 0.35); }
#screen-gacha.revealing .gacha-row, #screen-gacha.revealing .mc-foot { visibility: hidden; }
.mc-head { position: relative; flex: none; height: calc(33 * var(--s)); display: flex; align-items: center; justify-content: center; }
.mc-head::after, .mc-foot::before { content: ''; position: absolute; left: 0; right: 0; height: calc(2 * var(--s)); background-size: calc(32 * var(--s)) 100%; image-rendering: pixelated; }
.mc-head::after { bottom: 0; background-image: var(--mc-header-sep); }
.mc-foot::before { top: 0; background-image: var(--mc-footer-sep); }
.mc-head h2 { margin: 0; font-weight: normal; font-size: inherit; }
.mc-head .pill { position: absolute; right: calc(8 * var(--s)); top: 50%; transform: translateY(-50%); }
.pill { display: inline-flex; align-items: center; gap: calc(2 * var(--s)); }
.pill img { width: calc(16 * var(--s)); height: calc(16 * var(--s)); image-rendering: pixelated; }
.mc-body { flex: 1; min-height: 0; position: relative; background: var(--mc-list-bg) 0 0 / calc(16 * var(--s)) repeat; image-rendering: pixelated; overflow: auto; }
.mc-foot { position: relative; flex: none; min-height: calc(33 * var(--s)); display: flex; align-items: center; justify-content: center; gap: calc(4 * var(--s)); padding: calc(6 * var(--s)) calc(4 * var(--s)); flex-wrap: wrap; }

/* boot */
#screen-boot { background: #1b1b1b; align-items: center; justify-content: center; text-shadow: none; font-family: 'Consolas', 'Courier New', monospace; font-size: 18px; line-height: 1.3; }
html.mc-font #screen-boot { font-family: var(--font); }
.boot-box { width: min(520px, 90vw); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.boot-name { font-size: 40px; letter-spacing: 4px; color: #fff; font-weight: bold; }
.boot-text { color: #ddd; }
.boot-bar { width: 100%; height: 14px; border: 2px solid #fff; padding: 2px; }
.boot-bar > div { height: 100%; width: 0; background: #fff; transition: width 0.15s; }
.boot-error { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.boot-error-title { color: #ff5555; font-size: 22px; }
.boot-error code { background: #000; color: #fff; padding: 1px 6px; }
.boot-btn { font: inherit; color: #fff; background: #6f6f6f; border: 2px solid #000; box-shadow: inset 2px 2px 0 #a8a8a8, inset -2px -2px 0 #464646; padding: 6px 22px; cursor: pointer; }
.boot-btn:hover { color: #ffffa0; background: #7a84c6; }

/* title */
#screen-title { align-items: center; justify-content: center; }
.title-wrap { display: flex; flex-direction: column; align-items: center; gap: calc(24 * var(--s)); margin-top: calc(-10 * var(--s)); }
.logo { position: relative; margin: 0; font-weight: normal; display: flex; flex-direction: column; align-items: center; line-height: 1; text-shadow: none; }
.logo-a, .logo-b { display: block; color: transparent; -webkit-background-clip: text; background-clip: text; image-rendering: pixelated; white-space: nowrap; }
.logo-a {
  font-size: calc(40 * var(--s)); line-height: calc(40 * var(--s)); letter-spacing: calc(2 * var(--s));
  background-image: var(--mc-logo-a); background-size: calc(20 * var(--s)); background-color: #8a8a8a;
  filter: drop-shadow(0 calc(2 * var(--s)) 0 #444) drop-shadow(0 calc(2 * var(--s)) 0 #262626) drop-shadow(calc(1 * var(--s)) 0 0 #111) drop-shadow(calc(-1 * var(--s)) 0 0 #111) drop-shadow(0 calc(-1 * var(--s)) 0 #111);
}
.logo-b {
  font-size: calc(16 * var(--s)); line-height: calc(16 * var(--s)); margin-top: calc(8 * var(--s)); letter-spacing: calc(2 * var(--s));
  background-image: var(--mc-logo-b); background-size: calc(12 * var(--s)); background-color: #2bb34b;
  filter: drop-shadow(0 calc(var(--s)) 0 #0a5a22) drop-shadow(0 calc(var(--s)) 0 #063a15) drop-shadow(var(--s) 0 0 #021) drop-shadow(calc(-1 * var(--s)) 0 0 #021) drop-shadow(0 calc(-1 * var(--s)) 0 #021);
}
.splash {
  position: absolute; right: calc(-34 * var(--s)); bottom: calc(6 * var(--s)); color: var(--yellow); text-shadow: var(--s) var(--s) 0 #3f3f15;
  white-space: nowrap; transform: rotate(-20deg); animation: splash 0.5s ease-in-out infinite alternate; pointer-events: none; font-size: calc(8 * var(--s));
}
@keyframes splash { from { transform: rotate(-20deg) scale(1); } to { transform: rotate(-20deg) scale(1.08); } }
.title-buttons { display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--s)); }
.title-buttons .row, .game-menu .row { display: flex; gap: calc(4 * var(--s)); }
.hc-btn { width: 100%; margin: var(--s) 0; }
.mc-btn.red { color: var(--red); }
.daily-board { background: rgba(0, 0, 0, 0.5); padding: calc(3 * var(--s)); min-height: calc(60 * var(--s)); display: flex; flex-direction: column; gap: var(--s); }
.daily-row { display: flex; gap: calc(4 * var(--s)); }
.daily-row .daily-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.daily-row.me .daily-name { color: var(--yellow); }
#daily-info .hero { display: flex; align-items: center; gap: calc(4 * var(--s)); margin: calc(2 * var(--s)) 0; }
#daily-info .hero img { width: calc(28 * var(--s)); height: calc(28 * var(--s)); }
.armor-set { align-self: center; margin-left: calc(4 * var(--s)); }
.mp-menus { display: flex; gap: calc(4 * var(--s)); }
.mp-menus .mc-btn { flex: 1; }
.mp-chat-lines { height: calc(120 * var(--s)); overflow-y: auto; background: rgba(0, 0, 0, 0.5); padding: calc(2 * var(--s)); }
.mp-chat-lines div { line-height: calc(10 * var(--s)); overflow-wrap: anywhere; }
#mp-chat .mp-join .mc-field { flex: 1; min-width: 0; }
.free { color: var(--green); text-shadow: var(--s) var(--s) 0 #153f15; }
.corner-emeralds { position: absolute; top: calc(6 * var(--s)); right: calc(8 * var(--s)); display: flex; align-items: center; gap: calc(2 * var(--s)); }
.corner-emeralds img { width: calc(16 * var(--s)); height: calc(16 * var(--s)); image-rendering: pixelated; }
.footer-left, .footer-right { position: absolute; bottom: calc(2 * var(--s)); }
.footer-left { left: calc(2 * var(--s)); }
.footer-right { right: calc(2 * var(--s)); }

/* heroes */
.heroes-body { display: grid; grid-template-columns: minmax(0, calc(170 * var(--s))) 1fr minmax(0, calc(160 * var(--s))); gap: calc(8 * var(--s)); padding: calc(6 * var(--s)); background: none; overflow: hidden; }
#hero-list { background: var(--mc-list-bg) 0 0 / calc(16 * var(--s)) repeat; min-height: 0; }
#hero-detail { align-self: start; max-height: 100%; overflow-y: auto; }
.hero-entry .lines > div:first-child { color: inherit; }
.hero-entry.locked > img { filter: brightness(0); opacity: 0.6; }
#hero-detail .tip-title { font-size: calc(8 * var(--s)); }
#hero-detail .line { margin: calc(1 * var(--s)) 0; }
#hero-detail .weapon { display: flex; align-items: center; gap: calc(3 * var(--s)); margin: calc(2 * var(--s)) 0; }

/* ender chest */
.gacha-body { display: flex; flex-direction: column; align-items: center; background: none; overflow-y: auto; }
.chest-space { flex: 1; min-height: calc(40 * var(--s)); }
.gacha-row { display: flex; gap: calc(6 * var(--s)); align-items: flex-start; margin-bottom: calc(6 * var(--s)); flex-wrap: wrap; justify-content: center; }
.gacha-info { width: calc(150 * var(--s)); }
.rates-note { margin-top: calc(3 * var(--s)); }
#gacha-rates-list > div { margin-bottom: calc(2 * var(--s)); }
#gacha-reveal { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; background: rgba(0, 0, 0, 0.35); padding-bottom: calc(8 * var(--s)); }
#reveal-flash { position: absolute; inset: 0; background: #ff55ff; opacity: 0; pointer-events: none; }
#reveal-flash.go { animation: flash 0.9s ease-out; }
@keyframes flash { 0% { opacity: 0.6; } 100% { opacity: 0; } }
.reveal-lines { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(8 * var(--s)); margin-top: calc(4 * var(--s)); min-width: calc(120 * var(--s)); }
.reveal-lines:empty { visibility: hidden; }
.reveal-lines > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: pop 0.2s ease-out both; }
.reveal-actions { display: flex; gap: calc(4 * var(--s)); margin-top: calc(4 * var(--s)); min-height: calc(20 * var(--s)); }

/* enchantments */
.books-body { display: flex; gap: calc(8 * var(--s)); justify-content: center; align-items: flex-start; padding: calc(8 * var(--s)); flex-wrap: wrap; background: none; }
.books-window .slot-grid { grid-template-columns: repeat(6, calc(18 * var(--s))); }
.books-window .win-note { margin-top: calc(3 * var(--s)); }
.stats-panel { width: calc(200 * var(--s)); }
.stats-head { text-align: center; margin-bottom: calc(2 * var(--s)); }
.stats-list { background: var(--mc-list-bg) 0 0 / calc(16 * var(--s)) repeat; gap: 0; }
.stats-list > div { display: flex; justify-content: space-between; padding: var(--s) calc(3 * var(--s)); }
.stats-list > div:nth-child(odd) { background: rgba(255, 255, 255, 0.06); }

/* options */
.options-body { display: flex; flex-direction: column; align-items: center; padding-top: calc(12 * var(--s)); gap: calc(10 * var(--s)); background: none; }
.opt-grid { display: grid; grid-template-columns: repeat(2, calc(150 * var(--s))); gap: calc(4 * var(--s)) calc(10 * var(--s)); }
.opt-info { max-width: calc(310 * var(--s)); text-align: center; }

/* how to play: a book */
.help-body { display: flex; justify-content: center; align-items: flex-start; padding-top: calc(2 * var(--s)); background: none; }
.mc-book { position: relative; flex: none; width: calc(192 * var(--s)); height: calc(192 * var(--s)); background: var(--mc-book) 0 0 / calc(256 * var(--s)) calc(256 * var(--s)) no-repeat; image-rendering: pixelated; text-shadow: none; color: #000; }
.book-pageno { position: absolute; left: calc(36 * var(--s)); top: calc(16 * var(--s)); width: calc(114 * var(--s)); text-align: right; }
.book-text { position: absolute; left: calc(36 * var(--s)); top: calc(30 * var(--s)); width: calc(116 * var(--s)); height: calc(126 * var(--s)); overflow: hidden; white-space: pre-wrap; }
.book-text b { font-weight: normal; color: #000; text-decoration: underline; }
.book-turn { position: absolute; top: calc(159 * var(--s)); width: calc(23 * var(--s)); height: calc(13 * var(--s)); border: none; padding: 0; background: var(--mc-page-next) 0 0 / 100% 100%; image-rendering: pixelated; cursor: pointer; }
.book-turn.next { left: calc(116 * var(--s)); }
.book-turn.prev { left: calc(43 * var(--s)); background-image: var(--mc-page-prev); }
.book-turn.next:hover { background-image: var(--mc-page-next-hover); }
.book-turn.prev:hover { background-image: var(--mc-page-prev-hover); }

/* multiplayer */
.mp-body { display: flex; justify-content: center; align-items: flex-start; padding: calc(8 * var(--s)); background: none; }
.mp-form { width: calc(220 * var(--s)); display: flex; flex-direction: column; gap: calc(3 * var(--s)); }
.mp-form .mc-field { width: 100%; }
.mp-form > .mc-btn { width: 100%; margin: calc(3 * var(--s)) 0; }
.mp-body { flex-wrap: wrap; }
.acc-note { line-height: calc(10 * var(--s)); }
.acc-msg { width: 100%; text-align: center; margin-top: calc(6 * var(--s)); min-height: calc(10 * var(--s)); }
#net-status { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 60; padding: calc(6 * var(--s)) calc(10 * var(--s)); background: rgba(0, 0, 0, 0.75); color: var(--yellow); text-align: center; pointer-events: none; }
.title-account { position: absolute; top: calc(4 * var(--s)); left: calc(6 * var(--s)); }
.mp-hero-row { display: flex; align-items: center; gap: calc(4 * var(--s)); }
.mp-hero-row .mc-entry { flex: 1; min-width: 0; min-height: 0; padding: 0; }
.mp-hero-row .mc-entry > img { width: calc(20 * var(--s)); height: calc(20 * var(--s)); }
.mp-join { display: flex; gap: calc(4 * var(--s)); }
.mp-join .mc-field { flex: 1; min-width: 0; }
.mp-status-row { display: flex; align-items: center; justify-content: space-between; gap: calc(4 * var(--s)); min-height: calc(20 * var(--s)); }
.room-code-line { text-align: center; }
.mp-invite { display: flex; align-items: center; gap: calc(4 * var(--s)); }
.mp-invite #mp-link { flex: 1; min-width: 0; overflow-wrap: anywhere; user-select: all; }
#mp-players { background: var(--mc-list-bg) 0 0 / calc(16 * var(--s)) repeat; margin: calc(2 * var(--s)) 0; }
#mp-players .mc-entry.me { border-color: #808080; }
#mp-players .mc-entry.empty { color: var(--dgray); justify-content: center; text-shadow: none; }

/* ---------------------------------------------------------------- HUD */
#hud { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
#hud-top { position: absolute; top: calc(4 * var(--s)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: calc(3 * var(--s)); }
#hud-fps { position: absolute; left: calc(4 * var(--s)); bottom: calc(4 * var(--s)); color: var(--white); text-shadow: var(--sh); }
#hud-endless { color: var(--lpurple); text-shadow: var(--sh); }
#hud-timer { font-size: calc(16 * var(--s)); line-height: calc(18 * var(--s)); text-shadow: calc(2 * var(--s)) calc(2 * var(--s)) 0 #3f3f3f; }
#hud-boss { display: flex; flex-direction: column; align-items: center; gap: calc(3 * var(--s)); text-align: center; }
.boss-name { margin-bottom: var(--s); }
.bossbar { --bar-bg: var(--mc-boss-bg); --bar-fill: var(--mc-boss-fill); width: calc(182 * var(--s)); max-width: 90vw; height: calc(5 * var(--s)); background: var(--bar-bg) 0 0 / 100% 100%; image-rendering: pixelated; }
.bossbar.red { --bar-bg: var(--mc-boss-red-bg); --bar-fill: var(--mc-boss-red-fill); }
.bossbar.pink { --bar-bg: var(--mc-boss-pink-bg); --bar-fill: var(--mc-boss-pink-fill); }
.bossbar.blue { --bar-bg: var(--mc-boss-blue-bg); --bar-fill: var(--mc-boss-blue-fill); }
.bossbar.white { --bar-bg: var(--mc-boss-white-bg); --bar-fill: var(--mc-boss-white-fill); }
.bossbar.yellow { --bar-bg: var(--mc-boss-yellow-bg); --bar-fill: var(--mc-boss-yellow-fill); }
.boss-fill { height: 100%; width: 100%; overflow: hidden; transition: width 0.15s; }
.boss-fill::before { content: ''; display: block; width: calc(182 * var(--s)); max-width: 90vw; height: 100%; background: var(--bar-fill) 0 0 / 100% 100%; image-rendering: pixelated; }
#hud-stats { position: absolute; top: calc(4 * var(--s)); right: calc(6 * var(--s)); display: flex; flex-direction: column; align-items: flex-end; gap: var(--s); }
.hud-stat { display: flex; align-items: center; gap: calc(2 * var(--s)); }
.hud-stat img { width: calc(9 * var(--s)); height: calc(9 * var(--s)); image-rendering: pixelated; }
#hud-pause { position: absolute; top: calc(4 * var(--s)); left: calc(4 * var(--s)); pointer-events: auto; }
#hud-talk { position: absolute; top: calc(4 * var(--s)); left: calc(26 * var(--s)); pointer-events: auto; }
/* Chat, as in Minecraft: lines fade after 8 s; with the chat open, the last ones stay, above the quick messages
   and the text bar. */
/* Tab: Minecraft's player list with everyone's gear. */
#hud-tab { position: absolute; top: calc(30 * var(--s)); left: 50%; transform: translateX(-50%); z-index: 4; display: flex; flex-direction: column; gap: var(--s); padding: var(--s); background: rgba(0, 0, 0, 0.5); max-width: 96vw; }
#hud-tab .tabx-title { text-align: center; padding: var(--s) 0; }
.tabx-row { display: flex; align-items: center; flex-wrap: wrap; gap: calc(4 * var(--s)); padding: var(--s) calc(3 * var(--s)) var(--s) var(--s); background: rgba(255, 255, 255, 0.125); }
.tabx-row.away .tabx-name { color: var(--gray); }
.tabx-row.down .tabx-name { color: var(--red); }
.tabx-name { min-width: calc(64 * var(--s)); }
.tabx-items { display: flex; flex-wrap: wrap; align-items: center; }
.tabx-gap { width: calc(4 * var(--s)); }
#hud-team { pointer-events: auto; cursor: pointer; }
#hud-spec { position: absolute; bottom: calc(60 * var(--s)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: calc(4 * var(--s)); padding: var(--s) calc(4 * var(--s)); background: rgba(0, 0, 0, 0.5); pointer-events: auto; white-space: nowrap; }
#hud-effect { position: absolute; top: calc(30 * var(--s)); right: calc(4 * var(--s)); display: flex; align-items: center; gap: calc(3 * var(--s)); padding: calc(3 * var(--s)); background: var(--mc-effect-bg, rgba(0, 0, 0, 0.5)) 0 0 / 100% 100%; image-rendering: pixelated; }
#hud-effect img { width: calc(18 * var(--s)); height: calc(18 * var(--s)); }
.public-list { max-height: calc(120 * var(--s)); overflow-y: auto; }
.public-list .pub-row { display: flex; align-items: center; gap: calc(4 * var(--s)); }
.public-list .pub-row .lines { flex: 1; min-width: 0; }
#hud-tab:not(.hidden) ~ #mp-waiting { display: none; }
#hud-chatwrap { position: absolute; left: calc(4 * var(--s)); bottom: calc(52 * var(--s)); display: flex; flex-direction: column; gap: var(--s); max-width: 60vw; z-index: 3; }
#hud-chat { display: flex; flex-direction: column; gap: 0; }
#hud-chat div { background: rgba(0, 0, 0, 0.5); padding: 0 calc(2 * var(--s)); line-height: calc(10 * var(--s)); transition: opacity 0.6s; overflow-wrap: anywhere; }
#hud-chat div.old { opacity: 0; }
#hud-chat div.gone { display: none; }
#hud-chatwrap.open #hud-chat div { opacity: 1; display: block; transition: none; }
#hud-quick { display: flex; flex-wrap: wrap; gap: var(--s); pointer-events: auto; }
#hud-quick button { background: rgba(0, 0, 0, 0.5); border: 0; color: var(--white); font: inherit; text-shadow: var(--sh); padding: var(--s) calc(3 * var(--s)); cursor: pointer; }
#hud-quick button:hover, #hud-quick button:focus { background: rgba(255, 255, 255, 0.25); }
#hud-quick .key { color: var(--yellow); }
#hud-chatbar { width: calc(220 * var(--s)); max-width: 100%; background: rgba(0, 0, 0, 0.5); padding: var(--s) calc(2 * var(--s)); pointer-events: auto; }
#chat-input { display: block; width: 100%; background: none; border: 0; outline: 0; padding: 0; color: var(--white); font: inherit; text-shadow: var(--sh); caret-color: var(--white); }
#hud-minimap { position: absolute; top: calc(30 * var(--s)); right: calc(6 * var(--s)); width: calc(64 * var(--s)); height: calc(64 * var(--s)); image-rendering: pixelated; }
#hud-banners { position: absolute; top: 24%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--s)); width: 94vw; }
.banner { text-align: center; animation: banner 3.2s ease-out forwards; font-size: calc(16 * var(--s)); line-height: calc(18 * var(--s)); text-shadow: calc(2 * var(--s)) calc(2 * var(--s)) 0 #3f3f3f; }
.banner.red { color: var(--red); text-shadow: calc(2 * var(--s)) calc(2 * var(--s)) 0 #3f1515; }
.banner.gold { color: var(--gold); text-shadow: calc(2 * var(--s)) calc(2 * var(--s)) 0 #2a2a00; }
.banner.purple { color: var(--lpurple); text-shadow: calc(2 * var(--s)) calc(2 * var(--s)) 0 #3f153f; }
.banner.green { color: var(--green); text-shadow: calc(2 * var(--s)) calc(2 * var(--s)) 0 #153f15; }
@media (max-width: 900px) { .banner { font-size: calc(8 * var(--s)); line-height: calc(9 * var(--s)); text-shadow: var(--sh); } }
@keyframes banner { 0% { opacity: 0; } 8% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
#hud-bottom { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; width: calc(266 * var(--s)); }
#hud-armor { display: flex; align-self: stretch; height: calc(9 * var(--s)); margin-bottom: var(--s); }
#hud-armor i { width: calc(9 * var(--s)); height: calc(9 * var(--s)); margin-right: calc(-1 * var(--s)); background: var(--mc-armor-empty) 0 0 / 100% 100%; image-rendering: pixelated; }
#hud-armor i.full { background-image: var(--mc-armor-full); }
#hud-armor i.half { background-image: var(--mc-armor-half); }
#hud-skill { position: absolute; right: calc(-28 * var(--s)); bottom: 0; pointer-events: auto; border: 0; padding: 0; cursor: pointer; }
#hud-skill .skill-cd { position: absolute; left: calc(3 * var(--s)); right: calc(3 * var(--s)); top: calc(3 * var(--s)); height: 0; background: rgba(0, 0, 0, 0.6); pointer-events: none; }
#hud-skill.ready img { filter: drop-shadow(0 0 calc(2 * var(--s)) rgba(255, 255, 160, 0.9)); }
#hud-hearts { display: flex; align-items: center; align-self: stretch; height: calc(9 * var(--s)); margin-bottom: var(--s); }
#hud-hearts img { width: calc(9 * var(--s)); height: calc(9 * var(--s)); image-rendering: pixelated; margin-right: calc(-1 * var(--s)); }
#hud-hearts.low img:nth-child(odd) { animation: heartshake 0.3s steps(2) infinite; }
@keyframes heartshake { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-1 * var(--s))); } }
.hp-text { margin-left: auto; }
#hud-xp { position: relative; width: 100%; height: calc(5 * var(--s)); background: var(--mc-xp-bg) 0 0 / 100% 100%; image-rendering: pixelated; margin-bottom: calc(1 * var(--s)); }
#hud-xp-fill { height: 100%; width: 0; overflow: hidden; }
#hud-xp-fill::before { content: ''; display: block; width: calc(266 * var(--s)); height: 100%; background: var(--mc-xp-fill) 0 0 / 100% 100%; image-rendering: pixelated; }
#hud-level { position: absolute; left: 50%; bottom: calc(1 * var(--s)); transform: translateX(-50%); color: var(--xp);
  text-shadow: var(--s) 0 0 #000, calc(-1 * var(--s)) 0 0 #000, 0 var(--s) 0 #000, 0 calc(-1 * var(--s)) 0 #000; }
#hud-hotbar { display: flex; }
.hot-slot { position: relative; width: calc(22 * var(--s)); height: calc(22 * var(--s)); background: var(--mc-hotslot) 0 0 / 100% 100%; image-rendering: pixelated; display: flex; align-items: center; justify-content: center; }
.hot-slot.gap { margin-left: calc(2 * var(--s)); }
.hot-slot img { width: calc(16 * var(--s)); height: calc(16 * var(--s)); image-rendering: pixelated; }
.hot-slot .lv { position: absolute; right: calc(2 * var(--s)); bottom: 0; }
.hot-slot.evolved img { filter: drop-shadow(0 0 calc(2 * var(--s)) rgba(255, 85, 255, 0.95)); }
/* Two fused items in one slot: both icons, glowing purple. */
.hot-slot .fuse2 { display: none; }
.hot-slot.fused img { position: absolute; left: calc(3 * var(--s)); top: calc(3 * var(--s)); width: calc(12 * var(--s)); height: calc(12 * var(--s)); filter: drop-shadow(0 0 calc(1.5 * var(--s)) rgba(255, 85, 255, 0.95)); }
.hot-slot.fused img.fuse2 { display: block; left: auto; top: auto; right: calc(3 * var(--s)); bottom: calc(3 * var(--s)); }
.hot-slot.evolved .lv { color: var(--lpurple); }
#touch-stick { position: fixed; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.35); background: rgba(0, 0, 0, 0.2); }
#touch-knob { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); transform: translate(-50%, -50%); }
/* Multiplayer: Minecraft's player list (Tab), a dark panel with one lighter row per player. */
#hud-team { position: absolute; top: calc(28 * var(--s)); left: calc(4 * var(--s)); display: flex; flex-direction: column; gap: var(--s); padding: var(--s); background: rgba(0, 0, 0, 0.5); }
#hud-team:empty { display: none; }
.tab-row { display: flex; align-items: center; gap: calc(3 * var(--s)); padding: var(--s) calc(2 * var(--s)) var(--s) var(--s); background: rgba(255, 255, 255, 0.125); }
.tab-face { width: calc(18 * var(--s)); height: calc(18 * var(--s)); flex: none; }
.tab-row.down .tab-face, .tab-row.away .tab-face { filter: grayscale(1) brightness(0.6); }
.tab-main { display: flex; flex-direction: column; gap: var(--s); min-width: 0; }
.tab-name { display: flex; align-items: center; gap: calc(3 * var(--s)); white-space: nowrap; line-height: 1; }
.tab-row.away .tab-name > span:first-child { color: var(--gray); }
.tab-ping { width: calc(10 * var(--s)); height: calc(8 * var(--s)); margin-left: auto; flex: none; background: var(--mc-ping) 0 0 / 100% 100%; image-rendering: pixelated; }
.tab-row.away .tab-ping { background-image: var(--mc-ping-off); }
.tab-hearts { display: flex; }
.tab-hearts img { width: calc(9 * var(--s)); height: calc(9 * var(--s)); margin-right: calc(-1 * var(--s)); image-rendering: pixelated; }
.tab-row.down .tab-hearts { opacity: 0.5; }
.tab-row.down .tab-name > span:first-child { color: var(--red); }
/* More than 4 players: one line each, like Minecraft's own list. */
#hud-team.many .tab-row { padding: 0 calc(2 * var(--s)) 0 0; gap: calc(2 * var(--s)); }
#hud-team.many .tab-face { width: calc(9 * var(--s)); height: calc(9 * var(--s)); }
#hud-team.many .tab-main { flex-direction: row; align-items: center; gap: calc(3 * var(--s)); }
#hud-team.many .tab-name { width: calc(70 * var(--s)); overflow: hidden; }
#hud-team.many .tab-name > span { overflow: hidden; text-overflow: ellipsis; }
#hud-team.many .tab-name > span + span { display: none; }
#mp-waiting { position: absolute; top: 15%; left: 50%; transform: translateX(-50%); }

/* ---------------------------------------------------------------- modals */
.modal { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(16, 16, 16, 0.6); padding: calc(4 * var(--s)); }
.modal-actions { display: flex; justify-content: space-between; align-items: center; gap: calc(4 * var(--s)); margin-top: calc(4 * var(--s)); }
.modal-actions.center { justify-content: center; }
.levelup-window { width: calc(240 * var(--s)); max-width: 98vw; max-height: 96vh; overflow-y: auto; }
#levelup-options { display: flex; flex-direction: column; gap: calc(2 * var(--s)); }
.ench-opt {
  position: relative; display: flex; align-items: center; gap: calc(4 * var(--s)); width: 100%; text-align: left; cursor: pointer; outline: none;
  border: var(--s) solid transparent; border-image: var(--mc-ench-slot) 1 fill / var(--s) stretch; image-rendering: pixelated; background: none;
  padding: calc(2 * var(--s)) calc(3 * var(--s)); color: #685e4a; text-shadow: none; animation: optin 0.2s ease-out both;
}
.ench-opt:nth-child(2) { animation-delay: 0.05s; }
.ench-opt:nth-child(3) { animation-delay: 0.1s; }
.ench-opt:nth-child(4) { animation-delay: 0.15s; }
@keyframes optin { from { opacity: 0; transform: translateX(calc(-6 * var(--s))); } to { opacity: 1; transform: none; } }
.ench-opt:hover:not(:disabled), .ench-opt:focus-visible { border-image-source: var(--mc-ench-slot-hover); color: #ffff80; }
.ench-opt:disabled { border-image-source: var(--mc-ench-slot-off); cursor: default; opacity: 0.8; }
.ench-opt .slot { flex: none; }
.ench-opt .body { flex: 1; min-width: 0; }
.ench-opt .name { color: inherit; }
.ench-opt:not(:hover) .name { color: #3a3226; }
.ench-opt .tag { color: var(--xp); text-shadow: var(--s) var(--s) 0 #203f08; margin-left: calc(3 * var(--s)); }
.ench-opt .desc { color: inherit; }
.ench-opt:not(:hover) .desc { color: #5a5040; }
.ench-opt .evo { color: var(--dpurple); }
.ench-opt .key { position: absolute; right: calc(3 * var(--s)); top: calc(2 * var(--s)); color: #8b8270; }
.chest-window { max-width: 98vw; }
.chest-lines { margin-top: calc(3 * var(--s)); display: flex; flex-direction: column; gap: var(--s); max-width: calc(162 * var(--s)); }
.chest-lines > div { animation: pop 0.25s ease-out both; }
.chest-lines .evo { color: var(--dpurple); }
.modal.dark { background: rgba(0, 0, 0, 0.55); }
.game-menu { display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--s)); max-height: 100%; overflow-y: auto; }
.game-menu h2 { margin: 0 0 calc(8 * var(--s)); font-weight: normal; font-size: inherit; }
.pause-window { margin-top: calc(8 * var(--s)); }
#pause-build .slot-grid { grid-template-columns: repeat(6, calc(18 * var(--s))); margin-bottom: calc(2 * var(--s)); }
.pause-stats { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(8 * var(--s)); margin-top: calc(3 * var(--s)); }
.pause-stats > div { display: flex; justify-content: space-between; gap: calc(4 * var(--s)); }

/* ---------------------------------------------------------------- results (death screen) */
#screen-results { align-items: center; justify-content: center; background: linear-gradient(rgba(80, 0, 0, 0.38), rgba(128, 48, 48, 0.63)); overflow-y: auto; }
#screen-results.victory { background: linear-gradient(rgba(30, 0, 50, 0.45), rgba(10, 0, 25, 0.8)); }
.results-wrap { display: flex; flex-direction: column; align-items: center; padding: calc(8 * var(--s)); max-width: 98vw; }
#results-title { margin: 0 0 calc(8 * var(--s)); font-weight: normal; font-size: calc(16 * var(--s)); line-height: calc(18 * var(--s)); text-shadow: calc(2 * var(--s)) calc(2 * var(--s)) 0 #3f3f3f; }
#screen-results.victory #results-title { color: var(--gold); text-shadow: calc(2 * var(--s)) calc(2 * var(--s)) 0 #2a2a00; }
.results-sub { text-align: center; margin-bottom: calc(14 * var(--s)); }
.results-buttons { display: flex; flex-direction: column; gap: calc(4 * var(--s)); align-items: center; }
.results-grid { display: grid; grid-template-columns: repeat(3, calc(130 * var(--s))); gap: calc(5 * var(--s)); margin-top: calc(12 * var(--s)); }
.kv > div { display: flex; justify-content: space-between; gap: calc(4 * var(--s)); }
.kv > div > span:first-child { color: var(--gray); }
.kv .total { margin-top: calc(2 * var(--s)); }
.kv .total b { color: var(--green); font-weight: normal; display: inline-flex; align-items: center; gap: var(--s); }
.kv b { font-weight: normal; }
#results-team { margin-top: calc(5 * var(--s)); width: calc(400 * var(--s)); max-width: 96vw; box-sizing: border-box; }
.team-row { display: flex; gap: calc(5 * var(--s)); padding: calc(4 * var(--s)) 0; border-top: var(--s) solid rgba(255, 255, 255, 0.1); }
.team-row:first-child { border-top: 0; }
.team-row > img { width: calc(24 * var(--s)); height: calc(24 * var(--s)); flex: none; image-rendering: pixelated; }
.team-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s); }
.team-head { display: flex; justify-content: space-between; gap: calc(4 * var(--s)); flex-wrap: wrap; }
.team-head .me { color: var(--yellow); }
.team-stats { display: flex; flex-wrap: wrap; gap: var(--s) calc(8 * var(--s)); color: var(--gray); }
.team-stats b { color: var(--white); font-weight: normal; }
.team-items { display: flex; flex-wrap: wrap; gap: var(--s) calc(4 * var(--s)); align-items: center; color: var(--gray); }
.team-items > span { display: inline-flex; align-items: center; gap: var(--s); }
@media (max-width: 1000px) { .results-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- misc overlays */
#loading { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: var(--mc-menu-bg) 0 0 / calc(16 * var(--s)) repeat, #101010; image-rendering: pixelated; }
.loading-box { width: calc(160 * var(--s)); text-align: center; }
.loading-text { margin-bottom: calc(6 * var(--s)); }
#loading .boot-bar { height: calc(5 * var(--s)); border-width: var(--s); padding: var(--s); }
.loading-fill { width: 40% !important; animation: load 0.9s linear infinite; }
@keyframes load { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
#toast {
  position: fixed; top: 0; right: 0; z-index: 60; width: calc(160 * var(--s)); height: calc(32 * var(--s)); pointer-events: none;
  background: var(--mc-toast) 0 0 / 100% 100%; image-rendering: pixelated; padding: calc(7 * var(--s)) calc(8 * var(--s)) 0;
  animation: toast 3s ease-out forwards;
}
#toast-title { color: var(--yellow); text-shadow: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#toast-text { color: var(--white); text-shadow: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes toast { 0% { transform: translateX(100%); } 10%, 85% { transform: none; } 100% { transform: translateX(100%); } }
/* Advancement toast: the item at the left, the title in yellow (purple for a challenge). */
#toast-icon { display: none; position: absolute; left: calc(8 * var(--s)); top: calc(8 * var(--s)); width: calc(16 * var(--s)); height: calc(16 * var(--s)); image-rendering: pixelated; }
#toast.with-icon { padding-left: calc(30 * var(--s)); }
#toast.with-icon #toast-icon { display: block; }
#toast.with-icon #toast-text { margin-top: calc(2 * var(--s)); }
#toast.challenge #toast-title { color: #ff88ff; }
#toast.long #toast-title { display: none; }
#toast.long #toast-text { margin-top: 0; white-space: normal; text-overflow: clip; max-height: calc(18 * var(--s)); }

/* ---------------------------------------------------------------- advancements
   Minecraft's window is drawn over the tree; the tabs sit on its top edge. */
.adv-body { display: flex; justify-content: center; align-items: stretch; padding: calc(32 * var(--s)) calc(8 * var(--s)) calc(6 * var(--s)); background: none; overflow: hidden; }
.adv-win { position: relative; display: flex; width: 100%; max-width: calc(380 * var(--s)); max-height: calc(230 * var(--s)); }
.adv-frame { position: relative; flex: 1; min-height: calc(70 * var(--s)); }
.adv-frame::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; image-rendering: pixelated;
  border-style: solid; border-width: calc(24 * var(--s)) calc(15 * var(--s)) calc(15 * var(--s));
  border-image: var(--mc-adv-window) 24 15 15 15 fill / calc(24 * var(--s)) calc(15 * var(--s)) calc(15 * var(--s)) stretch;
}
.adv-view {
  position: absolute; left: calc(9 * var(--s)); top: calc(18 * var(--s)); right: calc(9 * var(--s)); bottom: calc(9 * var(--s));
  overflow: auto; scrollbar-width: none; background: #000 0 0 / calc(16 * var(--s)) repeat local; image-rendering: pixelated; cursor: grab; touch-action: none;
}
.adv-view::-webkit-scrollbar { display: none; }
.adv-tree { position: relative; min-width: 100%; min-height: 100%; }
.adv-lines { position: absolute; left: 0; top: 0; image-rendering: pixelated; pointer-events: none; }
.adv-node, .adv-tip-frame {
  position: absolute; width: calc(26 * var(--s)); height: calc(26 * var(--s)); padding: 0; border: 0; cursor: pointer;
  background: var(--mc-adv-task) 0 0 / 100% 100%; image-rendering: pixelated;
}
.adv-node.on, .adv-tip-frame.task.on { background-image: var(--mc-adv-task-on); }
.adv-node.goal, .adv-tip-frame.goal { background-image: var(--mc-adv-goal); }
.adv-node.goal.on, .adv-tip-frame.goal.on { background-image: var(--mc-adv-goal-on); }
.adv-node.challenge, .adv-tip-frame.challenge { background-image: var(--mc-adv-challenge); }
.adv-node.challenge.on, .adv-tip-frame.challenge.on { background-image: var(--mc-adv-challenge-on); }
.adv-node img, .adv-tip-frame img { position: absolute; left: calc(5 * var(--s)); top: calc(5 * var(--s)); width: calc(16 * var(--s)); height: calc(16 * var(--s)); image-rendering: pixelated; pointer-events: none; }
.adv-title { position: absolute; left: calc(8 * var(--s)); right: calc(8 * var(--s)); top: calc(6 * var(--s)); z-index: 2; display: flex; justify-content: space-between; gap: calc(6 * var(--s)); color: var(--win-text); text-shadow: none; white-space: nowrap; pointer-events: none; }
.adv-title span:first-child { overflow: hidden; text-overflow: ellipsis; }
.adv-tabs { position: absolute; left: 0; right: 0; top: calc(-28 * var(--s)); height: calc(32 * var(--s)); z-index: 2; pointer-events: none; }
.adv-tab { position: absolute; top: 0; width: calc(28 * var(--s)); height: calc(32 * var(--s)); padding: 0; border: 0; cursor: pointer; pointer-events: auto; background: var(--mc-adv-tab) 0 0 / 100% 100%; image-rendering: pixelated; }
.adv-tab.first { background-image: var(--mc-adv-tab-left); }
.adv-tab.sel { background-image: var(--mc-adv-tab-on); }
.adv-tab.first.sel { background-image: var(--mc-adv-tab-left-on); }
.adv-tab img { position: absolute; left: calc(6 * var(--s)); top: calc(9 * var(--s)); width: calc(16 * var(--s)); height: calc(16 * var(--s)); image-rendering: pixelated; }
.adv-tip { position: absolute; z-index: 3; width: calc(170 * var(--s)); max-width: 100%; display: flex; flex-direction: column; pointer-events: none; }
.adv-tip.up { flex-direction: column-reverse; }
.adv-tip-head {
  position: relative; min-height: calc(26 * var(--s)); padding: calc(9 * var(--s)) calc(6 * var(--s)) calc(4 * var(--s)) calc(32 * var(--s)); color: var(--white);
  border: calc(3 * var(--s)) solid transparent; border-image: var(--mc-adv-box) 3 fill / calc(3 * var(--s)) stretch; image-rendering: pixelated;
}
.adv-tip-head.on { border-image-source: var(--mc-adv-box-on); }
.adv-tip .adv-tip-frame { left: calc(-3 * var(--s)); top: calc(-3 * var(--s)); cursor: default; }
.adv-tip.left .adv-tip-head { padding-left: calc(6 * var(--s)); padding-right: calc(32 * var(--s)); }
.adv-tip.left .adv-tip-frame { left: auto; right: calc(-3 * var(--s)); }
.adv-tip-body {
  margin: calc(-2 * var(--s)) calc(2 * var(--s)) 0; padding: calc(5 * var(--s)) calc(6 * var(--s)) calc(4 * var(--s)); white-space: normal;
  border: calc(2 * var(--s)) solid transparent; border-image: var(--mc-adv-title-box) 2 fill / calc(2 * var(--s)) stretch; image-rendering: pixelated;
}
.adv-tip.up .adv-tip-body { margin: 0 calc(2 * var(--s)) calc(-2 * var(--s)); }
.adv-reward { display: flex; align-items: center; gap: var(--s); margin-top: calc(2 * var(--s)); color: var(--green); }
.adv-reward .gray { margin-left: calc(4 * var(--s)); }
.adv-total { flex-basis: 100%; text-align: center; }
#fatal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.85); padding: 16px; text-align: center; }
#fatal .box { max-width: calc(260 * var(--s)); display: flex; flex-direction: column; gap: calc(6 * var(--s)); align-items: center; }

#touch-cam { position: absolute; right: calc(6 * var(--s)); bottom: calc(6 * var(--s)); display: grid; grid-template-columns: repeat(2, auto); gap: calc(3 * var(--s)); pointer-events: auto; }
#touch-cam .mc-btn { width: calc(24 * var(--s)); height: calc(24 * var(--s)); }

/* Phones held upright: one column of options, the hotbar on two rows. */
@media (max-width: 520px) and (orientation: portrait) {
  .opt-grid { grid-template-columns: calc(150 * var(--s)); }
  #hud-bottom { width: calc(140 * var(--s)); }
  #hud-xp-fill::before { width: calc(140 * var(--s)); }
  #hud-hotbar { flex-wrap: wrap; justify-content: center; }
  .hot-slot.gap { margin-left: 0; }
  #hud-chatwrap { bottom: calc(76 * var(--s)); max-width: 90vw; }
  #touch-cam { bottom: calc(80 * var(--s)); }
  .levelup-window, .chest-window { max-width: 96vw; }
}
@media (max-width: 1100px) {
  .heroes-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero-stage { display: none; }
}
@media (max-width: 640px) {
  .heroes-body { grid-template-columns: 1fr; grid-auto-rows: max-content; overflow-y: auto; }
  .footer-right { display: none; }
}