/* Resource-pack presentation. The base widget contracts remain in wick.css. */
@font-face { font-family: Monocraft; src: url('/media/fonts/Monocraft.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
:root {
  color-scheme: dark;
  --pixel: Monocraft, monospace; --sans: Monocraft, monospace; --mono: Monocraft, monospace;
  --bg: #211e19; --panel: #282725; --panel2: #373531; --line: #56514a;
  --text: #f2eee5; --dim: #c3bfb4; --faint: #aaa598; --up: #9de05b; --down: #f38673;
  --gold: #f7d25e; --emerald: #9de05b; --grass: #74a83e;
  --scroll: 0; --hero-shift: 0px;
}
html { scroll-behavior: smooth; scroll-padding-top: 0; }
html, body { font-family: var(--pixel); font-size: 14px; }
body { background: linear-gradient(#211b16e8, #211b16e8), url('/media/minecraft/dirt.png') 0 0 / 64px; overflow-x: clip; image-rendering: pixelated; }
* { font-variant-ligatures: none; }
::selection { background: #728f48; color: white; }
img, .ico { image-rendering: pixelated; }
a, button, input, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button, input { border-radius: 0; }
[hidden] { display: none !important; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #f7dc76; outline-offset: 4px; }
input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
section[id], #find { scroll-margin-top: 95px; }
h1, h2, h3 { font-family: var(--pixel); font-weight: 400; letter-spacing: 0; }
h2 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.5; text-transform: none; text-shadow: 2px 2px #100e0b; }
.dim { font-size: 12px; }
.skip-link { position: fixed; z-index: 100; left: 12px; top: -100px; padding: 15px; background: #454545; border: 3px solid white; }.skip-link:focus { top: 10px; }
/* The top navigation is a small inventory hotbar. */
.top { height: 78px; padding: 0 max(26px, calc((100vw - 1360px)/2)); gap: 20px; background: linear-gradient(#20201eef,#20201eef), url('/media/minecraft/deepslate.png') 0 0 / 64px; border-bottom: 4px solid #111; box-shadow: inset 0 -2px #77776c; backdrop-filter: none; }
.logo { gap: 10px; position: relative; font: 400 27px var(--pixel); letter-spacing: -1px; text-shadow: 2px 2px #000; flex: none; }
.logo-sub { position: absolute; bottom: -9px; left: 42px; font-size: 7px; letter-spacing: 1px; color: #c0c0ae; }
.links { display: flex; margin: 0 auto 0 28px; gap: 5px; }
.links a { display: flex; align-items: center; gap: 9px; padding: 10px 12px; font-size: 11px; color: #eee; background: #62625d; border: 2px solid #161616; box-shadow: inset 2px 2px #92928a, inset -2px -2px #333430; transition: background .12s steps(2); }
.links img { width: 23px; height: 23px; object-fit: contain; }
.links a:hover, .links a.active { background: #7c805c; color: #ffffb0; box-shadow: inset 2px 2px #c6ce95, inset -2px -2px #424831; }
.ticker { gap: 9px; padding-left: 17px; border-color: #55564f; }.ticker .sym, .ticker .cap { font-size: 11px; }.ticker .chg { font-size: 10px; }
.mode { font-size: 9px; letter-spacing: 0; border: 1px solid #89734b; background: #191713; color: #f1d579; padding: 5px 6px; }
.wallet { margin: 0; font: 12px var(--pixel); padding: 12px 14px; color: white; text-shadow: 2px 2px #2e421c; background: #577b36; border: 2px solid #171b12; box-shadow: inset 2px 2px #a0c365, inset -3px -3px #354a23; }
.wallet:hover { background: #6b9444; }.wallet:active { box-shadow: inset 3px 3px #354a23; }.wallet.on { background: #4d5d3e; }
.scroll-progress { position: absolute; bottom: -3px; left: 0; width: 100%; height: 3px; background: #91d734; transform: scaleX(var(--scroll)); transform-origin: left; }
main { max-width: none; padding: 0; }
/* Title screen: an actual block-built landscape, with mobs in the foreground. */
.hero { position: relative; min-height: 690px; padding: 54px 24px 105px; isolation: isolate; overflow: hidden; display: flex; justify-content: center; text-align: center; background: #77a7b9; }
.hero-art { position: absolute; inset: -15px 0 -30px; z-index: -3; transform: translateY(var(--hero-shift)); will-change: transform; }
.hero-art > img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(#18283222, #17231833 45%, #14241666); }
.hero-copy { width: 100%; max-width: 680px; z-index: 2; }
.title-screen { position: relative; width: fit-content; margin: 0 auto 22px; }
.hero h1 { margin: 0; font-size: clamp(90px, 9vw, 136px); line-height: 1.05; letter-spacing: -8px; color: #d2d2ce; -webkit-text-stroke: 2px #2c2c2b; text-shadow: 0 2px #f5f5e9, 0 4px #9c9c99, 0 6px #777775, 0 8px #646462, 0 10px #444440, 0 14px #242623, 5px 18px 0 #17251c66; transform: perspective(500px) rotateX(8deg); }
.world-subtitle { display: block; margin-top: 18px; color: white; letter-spacing: 6px; font-size: 20px; text-shadow: 3px 3px #203020; }
.splash { display: block; position: absolute; top: 94px; left: 77%; width: 250px; color: #ffff55; font-size: 13px; line-height: 1.5; text-shadow: 2px 2px #544519; transform: rotate(-12deg); animation: splash 3s steps(6,end) infinite; }
.hero-copy > p { margin: 28px auto 23px; font-size: 15px; line-height: 1.9; max-width: 600px; color: #fff; text-shadow: 2px 2px #253927; }
.hero-actions { width: 390px; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.pixel-button { display: inline-flex; justify-content: center; align-items: center; gap: 15px; padding: 13px 20px; background: #747472; border: 2px solid #171715; color: white; box-shadow: inset 2px 2px #b7b7ad, inset -3px -3px #41413c, 0 3px #1d2319; font-size: 14px; line-height: 1.4; text-shadow: 2px 2px #31312c; transition: background .1s steps(2); }
.pixel-button.primary { background: #60883a; box-shadow: inset 2px 2px #acd467, inset -3px -3px #354b22, 0 3px #1d2319; }
.pixel-button:hover { color: #ffffad; background: #858579; outline: 2px solid #dfe4cd; outline-offset: -2px; }.pixel-button.primary:hover { background: #78a849; }.pixel-button:active { transform: translateY(2px); }
.menu-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.menu-row .pixel-button { font-size: 12px; padding: 12px 6px; }
.hero-notes { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 24px; font-size: 10px; text-shadow: 2px 2px #253221; color: #f3f0d9; }
.hearts { width: 140px; height: 15px; background: url('/media/minecraft/heart.svg') 0 0 / 14px 14px repeat-x; image-rendering: pixelated; }
.hero-mob { position: absolute; object-fit: contain; pointer-events: none; filter: drop-shadow(7px 8px 0 #16271433); }
.mob-sheep { left: 17%; bottom: 80px; width: 141px; height: auto; }.mob-pig { right: 20%; bottom: 67px; width: 138px; height: auto; }.mob-creeper { right: 8%; bottom: 130px; width: 105px; height: auto; }.mob-bee { left: 13%; top: 37%; width: 74px; height: auto; animation: bee-hover 4s steps(8,end) infinite; }
.scroll-cue { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 10px; color: white; text-shadow: 2px 2px #192b18; padding: 8px 12px; background: #14271088; }
.grass-edge { position: absolute; bottom: 0; left: 0; width: 100%; height: 16px; background: url('/media/minecraft/grass_block_side.png') left top / 64px 64px; image-rendering: pixelated; box-shadow: 0 -4px #638d37, 0 -7px #8aaa4a; }
/* Major sections retain consistent controls, but are built from different materials. */
.town-section, .tiers, .town-life, .crew-sec, .how, .faq, .closing { width: min(1280px, calc(100% - 80px)); margin: 0 auto; position: relative; }
.town-section { padding-top: 52px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 35px; margin-bottom: 24px; }
.eyebrow { display: block; font-size: 10px; letter-spacing: 1px; line-height: 1.7; color: #debd72; text-transform: uppercase; }
.section-heading h2 { margin-top: 9px; }.section-heading > p { font-size: 12px; color: #d0c4af; line-height: 1.8; margin: 0; }
.section-heading > div { position: relative; padding-left: 45px; }.section-heading > div::before { content: ''; position: absolute; left: -6px; top: 9px; width: 32px; height: 54px; background: url('/media/minecraft/lantern.png') center / contain no-repeat; image-rendering: pixelated; filter: drop-shadow(0 0 10px #efbd4740); }
.world-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: linear-gradient(#4b321aaa,#4b321aaa), url('/media/minecraft/oak_planks.png') 0 0/64px; padding: 13px 20px; border: 4px solid #171610; border-bottom: 0; box-shadow: inset 2px 2px #c4a465, inset -2px -2px #332519; text-shadow: 2px 2px #2d2014; }
.world-toolbar > span { display: flex; gap: 10px; align-items: center; font-size: 12px; }.world-toolbar em { font: normal 10px var(--pixel); color: #dfca96; }.tiny-block { width: 24px; height: 24px; flex: none; background: url('/media/brand/bedrock-logo.png') center/contain no-repeat; display: inline-block; }
.world-toolbar > div { display: flex; align-items: center; gap: 18px; }.connection { font-size: 10px; display: flex; gap: 7px; align-items: center; color: #e0d9bf; }.connection::before { content: ''; width: 6px; height: 6px; background: #a69054; }.connection.online::before { background: #99e44f; }
.expand-view { padding: 2px 0 2px 14px; border: 0; border-left: 2px solid #4a3521; background: transparent; font: 16px var(--pixel); color: #f3e2b8; cursor: pointer; }.expand-view span { font-size: 10px; }
.stage { grid-template-columns: minmax(0,1fr) 330px; padding: 8px; gap: 8px; border: 4px solid #171610; background: linear-gradient(#3335,#3335),url('/media/minecraft/cobblestone.png') 0 0/64px; }
.view { aspect-ratio: 16/10; border: 2px solid #171b14; background: #111; min-width: 0; }.view iframe { background: #111; }
.view:fullscreen { aspect-ratio: auto; width: 100%; height: 100%; }.view:fullscreen::after { content: 'ESC TO EXIT'; position: absolute; right: 20px; bottom: 25px; padding: 8px 10px; background: #111b; font-size: 12px; pointer-events: none; }
.hud { top: 13px; left: 13px; gap: 6px; }.chip { background: #181b17dc; border: 2px solid #090c08; box-shadow: inset 1px 1px #767d65; font-size: 10px; padding: 6px 8px; backdrop-filter: none; }.chip.hudcap { display: none; }.chip.live b { width: 6px; height: 6px; }.chip.live.on b { box-shadow: none; }.chip.sky i { width: 10px; height: 10px; border-radius: 0; box-shadow: none; }
.cams { top: auto; bottom: 12px; left: 12px; right: auto; display: flex; gap: 4px; padding: 4px; background: #bdbdb5; border: 2px solid #151813; box-shadow: inset 2px 2px white, inset -2px -2px #555; }
.cams button { font: 11px var(--pixel); padding: 7px 12px; background: #777970; color: #fff; border: 2px solid #373a32; box-shadow: inset 1px 1px #b4b6a8, inset -1px -1px #3e4137; text-shadow: 1px 1px #222; }.cams button.on { color: #ffffb2; background: #5e773f; border-color: #e7eac8; }.cams button:hover { background: #8a8d7a; }
.working { top: 13px; right: 13px; font-size: 10px; max-width: 50%; background: #171b15ec; border: 2px solid #292e24; border-left: 4px solid var(--c); padding: 6px 8px; }.working b { width: 6px; height: 6px; }
.lower { bottom: 78px; left: 13px; right: 13px; padding: 11px; grid-template-columns: 32px 1fr; gap: 10px; background: #10160de8; border: 2px solid #333d2d; border-left: 4px solid var(--c); }.lower .av { width: 32px; height: 32px; font-size: 16px; }.lower .who { font-size: 12px; }.lower .who em { font-size: 10px; }.lower p { font-size: 12px; }
.side { background: #252520; border: 2px solid #191a15; min-width: 0; }
.find { position: relative; padding: 21px 19px 17px; gap: 12px; background: linear-gradient(#322519d9,#322519d9),url('/media/minecraft/oak_planks.png') 0 0/64px; border-bottom: 3px solid #151711; }
.find-chest { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; }.find .eyebrow { font-size: 9px; padding-right: 40px; }.find h2 { font-size: 22px; line-height: 1.3; padding-right: 32px; }.find p { font-size: 11px; line-height: 1.9; color: #dfd1b7; }.find form { grid-template-columns: minmax(0,1fr) auto; gap: 5px; }.find input { background: #171812; border: 2px solid #837255; box-shadow: inset 2px 2px #0a0b08; padding: 10px 8px; font-size: 10px; color: #fff; }.find form button { background: #6b7950; border: 2px solid #292d21; box-shadow: inset 1px 1px #bfcc91,inset -2px -2px #404930; color: #fff; font-size: 11px; padding: 0 10px; }
.phantom { background: #676172; color: white; font: 11px var(--pixel); border: 2px solid #28262d; box-shadow: inset 2px 2px #a59cb8,inset -2px -2px #423e4d; padding: 10px; }.phantom:hover { background: #80778f; }.wallet-note { font-size: 9px; color: #d1c0a0; text-align: center; }.res { font-size: 11px; }.card { padding: 10px; grid-template-columns: 40px 1fr; gap: 9px; background: #20251b; }.card .ico { width: 40px; height: 40px; }.card b { font-size: 12px; }.card span { font-size: 10px; line-height: 1.8; }.acts button { font-size: 11px; box-shadow: inset 2px 2px #fff4,inset -2px -2px #0006; }.card .acts button { padding: 9px 6px; }.grow span { line-height: 1.7; }
.sh { padding: 17px 18px 8px; gap: 10px; }.sh h3 { font-size: 12px; letter-spacing: 0; color: #e1d4b4; }.sh .dim { font-size: 9px; }.news { padding: 0 18px 14px; scrollbar-width: thin; scrollbar-color: #8a816c #222; }.news li { font-size: 10px; line-height: 1.7; grid-template-columns: 39px 1fr; padding: 10px 0; gap: 8px; }.news .txt { line-height: 1.8; color: #c5c5b6; }.news .tag { font-size: 8px; }.news .t { font-size: 8px; }.news li:focus-visible,.top10 li:focus-visible { outline: 2px solid #e6d690; outline-offset: -2px; }
/* Six inventory slots: numbers are readable, textures stay at the edges. */
.stats { padding: 9px; gap: 6px; background: #c6c6bd; border: 3px solid #171914; border-top: 0; box-shadow: inset 2px 2px #f4f4eb,inset -2px -2px #696a60; grid-template-columns: repeat(6,minmax(0,1fr)); }
.stat { position: relative; padding: 12px 10px; gap: 6px; border: 0; background: #92958a; box-shadow: inset 2px 2px #53574b,inset -2px -2px #e9ece0; min-height: 136px; }.stat > img { width: 28px; height: 28px; object-fit: contain; margin-bottom: 3px; filter: drop-shadow(2px 2px #0004); }.stat > span { font-size: 10px; text-transform: none; letter-spacing: 0; color: #22271b; }.stat > b { font-size: 22px; line-height: 1.3; color: #151b0e; font-weight: 400; }.stat > em { font-size: 8px; color: #30372a; line-height: 1.7; }.stat.chest b { color: #234c18; }.stat.burned b { color: #583e0b; }
.world-footnote { display: flex; justify-content: space-between; gap: 16px; font-size: 9px; line-height: 1.8; color: #bdb198; margin: 14px 0 0; }.world-footnote span:first-child { display: flex; gap: 7px; align-items: center; }.world-footnote i { width: 5px; height: 5px; background: #8cc44c; }
/* House recipes: grass and dirt sit inside a Minecraft inventory frame. */
.tiers { padding: 64px 0 40px; }.tiers .section-heading > div::before { background-image: url('/media/minecraft/oak_door.png'); }
.tier-list { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 14px; background: #c6c6bd; padding: 13px; border: 3px solid #141610; box-shadow: inset 3px 3px #f1f1e7,inset -3px -3px #65675d,5px 6px #14160e66; }
.tier { padding: 0 12px 14px; background: #92968b; color: #1d2318; border: 2px solid #575c50; box-shadow: inset -2px -2px #e8ebdc; display: flex; flex-direction: column; gap: 8px; transition: background .12s steps(2); }
.tier:hover { background: #acb69b; outline: 2px solid #fff9d4; outline-offset: -2px; }.tier-scene { position: relative; width: calc(100% + 24px); height: 135px; margin: 0 -12px 4px; display: flex; justify-content: center; align-items: center; border-bottom: 3px solid #333f22; background: linear-gradient(#82afca66,#add3b755),url('/media/minecraft/oak_leaves.png') 0 0/64px; image-rendering: pixelated; isolation: isolate; }.tier-scene::before { content: ''; position: absolute; bottom: 0; height: 30px; width: 100%; z-index: -1; background: url('/media/minecraft/grass_block_side.png') 0 0/64px; }.tier-scene::after { content: ''; position: absolute; inset: 0; z-index: -2; background: #142d1b99; }.tier .ico { width: 90px; height: 90px; margin: 16px 0 0; filter: drop-shadow(4px 4px #0c1b0a55); }.tier-level { position: absolute; top: 8px; right: 8px; padding: 3px 5px; background: #24311b; color: #f5e7b8; font-size: 8px; }.tier h3 { font-size: 17px; font-weight: 400; text-transform: none; }.tier .pct { font-size: 10px; color: #284d1c; }.tier p { font-size: 10px; color: #2e3626; line-height: 1.8; min-height: 73px; margin: 0; }.tier .n { font-size: 9px; color: #303926; }.tier .n b { color: #1b2912; }.tier-cost { margin-top: auto; padding-top: 9px; border-top: 2px solid #707868; }.residents-count { line-height: 1.7; }.tier-caption { display: flex; justify-content: space-between; gap: 20px; margin: 18px 0 0; color: #d5c3a4; font-size: 10px; line-height: 1.9; }.tier-caption i { font-style: normal; margin: 0 6px; }
/* Descend into the mine for the ledger; the crafting table follows it. */
.town-life { padding: 56px 0; isolation: isolate; }.town-life::before { content: ''; position: absolute; inset: 0 calc((min(1280px, 100vw - 80px) - 100vw)/2); z-index: -1; background: linear-gradient(#242627e0,#242627e0),url('/media/minecraft/stone.png') 0 0/64px; border-top: 8px solid #141713; border-bottom: 8px solid #161a16; box-shadow: inset 0 4px #63685b; }.town-life .section-heading > div::before { background-image: url('/media/minecraft/diamond_pickaxe.png'); }.town-life .section-heading > p { color: #c1c4b9; }.town-life .eyebrow { color: #77d5cb; }.cave-decoration { position: absolute; top: 14px; right: 8px; display: flex; gap: 7px; opacity: .7; z-index: -1; }.cave-decoration img:first-child { width: 48px; height: 48px; }.cave-decoration img:last-child { width: 40px; height: 40px; transform: rotate(-15deg); }
.grid { margin: 0; grid-template-columns: 1fr 1fr; gap: 23px; align-items: stretch; }.panel { min-width: 0; background: #242724; padding: 20px; border: 3px solid #121710; box-shadow: inset 2px 2px #6a7160,inset -2px -2px #343b2e; }.panel .ph { margin-bottom: 15px; align-items: center; }.panel .ph h3 { font-size: 14px; color: #e4dfcc; }.panel .ph .dim { font-size: 10px; }.text-link { font-size: 11px; color: #e5d5a8; }.text-link:hover { color: #ffff93; text-decoration: underline; }
.top10 li { grid-template-columns: 22px 32px minmax(0,1fr) auto; gap: 11px; padding: 10px 4px; border-color: #41483c; }.top10 .rk { font-size: 13px; }.top10 .ico { width: 32px; height: 32px; }.top10 .w { font-size: 12px; overflow-wrap: anywhere; }.top10 .w span { font-size: 9px; line-height: 1.7; margin-top: 4px; }.top10 .w i { width: 7px; height: 7px; margin-right: 5px; }.top10 .p { font-size: 12px; font-weight: 400; }.top10 .p em { font-size: 8px; }
.chart-title { display: block; margin-bottom: 13px; font-size: 10px; }#chart { height: 335px; }.market-panel .lede { padding-top: 14px; border-top: 2px solid #41483c; font-size: 11px; line-height: 1.9; }.weather-key { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 18px; font-size: 9px; color: #b8bfac; }.weather-key span { display: flex; gap: 7px; align-items: center; }.sun-symbol { width: 9px; height: 9px; background: #f1d476; }.moon-symbol { width: 10px; height: 10px; box-shadow: inset -3px -2px #c9d8dd; }
.crew-sec { padding: 56px 0; }.crew-sec .section-heading > div::before { background-image: url('/media/minecraft/crafting_table_front.png'); height: 40px; top: 14px; width: 35px; }.crew { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }.mate { padding: 18px 16px; gap: 13px; border: 3px solid #1e1b14; border-top: 6px solid var(--c); box-shadow: inset 2px 2px #a78a5c,inset -2px -2px #4d3926,3px 4px #14120f88; background: linear-gradient(#32291fe8,#32291fe8),url('/media/minecraft/oak_planks.png') 0 0/64px; }.mate .hd { gap: 12px; }.mate .nm { font-size: 16px; letter-spacing: 0; font-weight: 400; }.mate .ti { font-size: 9px; line-height: 1.6; margin-top: 4px; color: #d1c2a6; }.mate .st { font-size: 10px; line-height: 1.6; color: #d1c2a6; }.mate .st b { width: 6px; height: 6px; }.mate .say { font-size: 11px; line-height: 1.9; min-height: 62px; border-left: 3px solid #9e8554; color: #ead9b8; }.crew-face { width: 42px; height: 42px; flex: none; border: 2px solid #1e2117; box-shadow: 2px 2px #080b0788; }
/* The handbook is a parchment book instead of another row of dashboard cards. */
.how { background: linear-gradient(90deg,transparent 49.8%,#9c805c55 49.8%,#9c805c55 50.2%,transparent 50.2%),#d6c59c; color: #3e3021; padding: 34px 34px 40px; border: 5px solid #4a3020; outline: 2px solid #bca374; box-shadow: inset 3px 3px #efe1bc,inset -3px -3px #9f865d,6px 7px #12130c88; margin-top: 8px; }.how .section-heading > div { padding-left: 50px; }.how .section-heading > div::before { background-image: url('/media/minecraft/writable_book.png'); width: 36px; height: 36px; top: 11px; filter: none; }.how .eyebrow { color: #79532c; }.how h2 { color: #39291c; text-shadow: 1px 1px #f1e0b3; }.how .section-heading > p { color: #5b4830; }.steps { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px; margin-top: 26px; }.step { background: none; border: 0; padding: 0; }.step .n { width: 31px; height: 31px; background: #735538; color: #fff0bd; font: 12px var(--pixel); box-shadow: inset 2px 2px #b69a69,inset -2px -2px #3b2b1c; margin-bottom: 15px; }.step h3 { font-size: 14px; line-height: 1.7; }.step p { font-size: 11px; color: #55442e; line-height: 1.9; margin-top: 9px; }
.faq { display: grid; grid-template-columns: 1fr 1.65fr; gap: 80px; padding-top: 68px; }.faq-intro h2 { margin-top: 12px; }.faq-intro > p { font-size: 12px; line-height: 1.9; color: #ccbca2; }.villager-scene { position: relative; display: flex; align-items: end; gap: 28px; padding: 48px 20px 16px; width: 220px; margin-top: 10px; border-bottom: 16px solid transparent; border-image: url('/media/minecraft/grass_block_side.png') 4 repeat; }.villager-scene > img { display: block; margin: 0; }.villager-scene .trade-emerald { width: 42px; height: 42px; align-self: center; animation: bee-hover 4s steps(5,end) infinite; }.villager-bubble { position: absolute; top: 0; left: 5px; color: #25241a; padding: 9px 14px; background: #e4dfc5; border: 2px solid #282c1e; font-size: 13px; box-shadow: 3px 3px #0006; }.villager-bubble::after { content: ''; position: absolute; bottom: -9px; left: 22px; height: 8px; width: 10px; background: #e4dfc5; border-bottom: 2px solid #282c1e; }
.faq-list { background: #2c2923; border: 3px solid #181810; box-shadow: inset 2px 2px #615b4a,inset -2px -2px #3c382d; padding: 8px 19px; }.faq details { max-width: none; padding: 0; border-top: 2px solid #4a4537; }.faq details:first-of-type { margin-top: 0; border-top: 0; }.faq summary { font-weight: 400; font-size: 12px; padding: 17px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; line-height: 1.7; }.faq summary::-webkit-details-marker { display: none; }.faq summary::after { content: '+'; display: grid; place-items: center; width: 22px; height: 22px; background: #65634c; color: #f6efc6; box-shadow: inset 1px 1px #ada988,inset -2px -2px #343424; font-size: 16px; flex: none; }.faq details[open] summary { color: #f9e18d; }.faq details[open] summary::after { content: '−'; }.faq details p { margin: 0; padding: 0 20px 20px 0; font-size: 11px; line-height: 1.9; color: #c9c0ac; }
.closing { margin-top: 62px; min-height: 260px; display: flex; align-items: center; justify-content: center; gap: 60px; padding: 30px 60px; background: linear-gradient(#18151dd9,#18151dd9),url('/media/minecraft/obsidian.png') 0 0/64px; border: 4px solid #0b0a0e; box-shadow: inset 2px 2px #504358,inset -2px -2px #2c2737; }.closing .eyebrow { color: #d3addd; }.closing h2 { margin: 10px 0; }.closing p { font-size: 12px; color: #c7b7d2; margin: 0 0 22px; }.closing .pixel-button { font-size: 12px; }.portal { position: relative; width: 108px; height: 156px; border: 18px solid transparent; border-image: url('/media/minecraft/obsidian.png') 4 round; box-shadow: 0 0 36px #b059ed33; background: repeating-linear-gradient(0deg,#742ab7 0 12px,#862cc7 12px 24px,#67269c 24px 36px); flex: none; }.portal i { position: absolute; inset: 0; background: repeating-linear-gradient(90deg,transparent 0 12px,#bd72df33 12px 24px,transparent 24px 36px); animation: portal 4s steps(4,end) infinite; }.closing-creeper { width: 77px; height: 110px; margin: 40px 0 -65px 20px; transform: rotate(-6deg); }
.foot { max-width: 1280px; margin: 42px auto 0; padding: 25px 0 32px; gap: 24px; border-top: 3px solid #504b40; }.foot .logo.sm { font-size: 23px; }.foot .dim { font-size: 9px; line-height: 1.9; color: #b6aa95; }.foot #footPool { font-size: 9px; margin-left: auto; }
.modal { background: #10110ddb; backdrop-filter: none; }.sheet { background: #c6c6bd; border: 3px solid #151711; box-shadow: inset 3px 3px #f4f4e8,inset -3px -3px #65685d,6px 7px #0008; color: #24291b; padding: 22px; }.sheet h2 { color: #252c1b; text-shadow: none; font-size: 22px; }.sheet .dim { color: #3e4832; font-size: 12px; }.sheet .x { color: #35402a; }.sheet .acts button { min-height: 40px; }.sheet .acts button.alt { background: #686b60; color: white; border-color: #34382d; }.sheet img { border: 3px solid #474e39; }
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .4s steps(6,end),transform .4s steps(8,end); transition-delay: var(--reveal-delay,0ms); }.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }
@keyframes splash { 0%,100% { transform: rotate(-12deg) scale(1); } 50% { transform: rotate(-12deg) scale(1.045); } }
@keyframes bee-hover { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes portal { 0%,100% { opacity: .4; transform: scaleX(1); } 50% { opacity: 1; transform: scaleX(.8); } }
@media (min-width: 1101px) { .side { height: 0; min-height: 100%; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #8d8267 #24241f; }.find { flex: none; }.news { flex: 1 0 80px; } }
@media (max-width: 1380px) { .ticker .chg { display: none; }.top { gap: 15px; }.links { margin-left: 14px; }.links a { padding: 9px; }.foot { margin-left: 40px; margin-right: 40px; }.hero-mob.mob-sheep { left: 12%; }.hero-mob.mob-pig { right: 16%; }.tier-list { gap: 10px; }.tier { padding: 0 10px 12px; }.tier-scene { margin-left: -10px; margin-right: -10px; width: calc(100% + 20px); }.tier p { min-height: 92px; } }
@media (max-width: 1100px) {
  .top { height: 74px; padding: 0 24px; gap: 13px; }.ticker { display: none; }.links { display: flex; margin-left: auto; margin-right: auto; }.links a { font-size: 10px; gap: 6px; }.links img { width: 20px; height: 20px; }.wallet { padding: 11px; font-size: 11px; }.mode { font-size: 8px; }
  .hero { min-height: 670px; padding-top: 55px; }.splash { left: 69%; top: 67px; font-size: 11px; width: 225px; }.hero h1 { font-size: 112px; }.hero-copy > p { font-size: 14px; }.mob-sheep { width: 112px; left: 9%; bottom: 70px; }.mob-pig { width: 110px; right: 14%; }.mob-creeper { width: 77px; bottom: 160px; right: 6%; }.mob-bee { left: 8%; top: 34%; width: 60px; }
  .section-heading > p { font-size: 10px; max-width: 280px; }.section-heading > div { padding-left: 39px; }.section-heading h2 { font-size: 25px; }.eyebrow { font-size: 9px; }
  .stage { grid-template-columns: minmax(0,1fr) 300px; }.view { aspect-ratio: auto; min-height: 485px; }.side { border: 2px solid #191a15; max-height: 550px; overflow: auto; }.news { max-height: 230px; flex: 1 0 100px; }.find { padding: 19px 15px; }.find-chest { width: 32px; height: 32px; right: 15px; }.find h2 { font-size: 20px; }.find p { font-size: 10px; }.working { top: 51px; left: 12px; right: auto; max-width: calc(100% - 24px); }.lower .who em { display: none; }
  .stats { grid-template-columns: repeat(6,minmax(0,1fr)); }.stat { padding: 10px 8px; border: 0 !important; }.stat > span { font-size: 8px; }.stat > b { font-size: 18px; }.stat > em { font-size: 8px; }
  .tier-list { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; padding: 10px; }.tier { padding: 0 8px 12px; }.tier-scene { width: calc(100% + 16px); margin: 0 -8px 4px; height: 110px; }.tier .ico { width: 72px; height: 72px; }.tier h3 { font-size: 14px; }.tier .pct { font-size: 8px; }.tier .n { font-size: 8px; }.tier p { font-size: 9px; min-height: 100px; }.tier-caption { font-size: 9px; }.grid { grid-template-columns: 1fr 1fr; gap: 16px; }.panel { padding: 16px; }.panel .ph .dim { font-size: 8px; }.top10 li { gap: 7px; }.top10 .w { font-size: 10px; }.top10 .w span { font-size: 8px; }.crew { grid-template-columns: 1fr 1fr; }.steps { grid-template-columns: 1fr 1fr; gap: 30px; }.step p { font-size: 12px; }.how { background: #d6c59c; }.faq { gap: 35px; }.closing { gap: 35px; padding: 30px; }.closing-creeper { width: 63px; height: 90px; margin-left: 0; }
}
@media (max-width: 820px) {
  .top { padding: 0 20px; gap: 10px; }.logo { font-size: 24px; }.logo-sub { display: none; }.logo img { width: 27px; height: 30px; }.links { gap: 4px; }.links a { padding: 8px; font-size: 9px; gap: 5px; }.links img { width: 18px; height: 18px; }.mode { display: none; }.wallet { font-size: 10px; padding: 11px 9px; }
  .hero { min-height: 650px; }.hero h1 { font-size: 100px; }.world-subtitle { font-size: 17px; letter-spacing: 4px; }.splash { top: 64px; left: 70%; width: 170px; font-size: 9px; }.hero-copy > p { max-width: 480px; font-size: 13px; }.hero-actions { width: 360px; }.mob-sheep { left: 6% !important; width: 94px; bottom: 65px; }.mob-pig { right: 10% !important; width: 92px; bottom: 58px; }.mob-creeper { width: 63px; right: 4%; bottom: 155px; }.mob-bee { width: 52px; left: 7%; top: 29%; }
  .town-section,.tiers,.town-life,.crew-sec,.how,.faq,.closing { width: calc(100% - 48px); }.section-heading { gap: 25px; }.section-heading h2 { font-size: 22px; }.section-heading > p { font-size: 10px; max-width: 215px; }.town-life::before { left: -24px; right: -24px; }.stage { grid-template-columns: 1fr; }.view { aspect-ratio: 16/10; min-height: 0; }.side { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; max-height: none; overflow: visible; }.find { grid-row: 1/3; border: 0; border-right: 2px solid #171a13; padding: 21px; }.find p { font-size: 11px; }.sh { padding: 20px 16px 8px; }.news { max-height: 250px; padding: 0 16px 13px; }.stats { grid-template-columns: repeat(3,minmax(0,1fr)); }.stat { padding: 14px; min-height: 144px; }.stat > span { font-size: 10px; }.stat > b { font-size: 22px; }.stat > em { font-size: 9px; }.world-footnote { font-size: 8px; }
  .tier-list { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; padding: 12px; }.tier { grid-column: span 2; padding: 0 12px 14px; }.tier:nth-child(4) { grid-column: 2/4; }.tier:nth-child(5) { grid-column: 4/6; }.tier-scene { width: calc(100% + 24px); margin: 0 -12px 4px; height: 120px; }.tier .ico { width: 80px; height: 80px; }.tier h3 { font-size: 16px; }.tier .pct,.tier .n { font-size: 9px; }.tier p { font-size: 10px; min-height: 90px; }.tier-caption { flex-direction: column; gap: 4px; text-align: center; }.grid { grid-template-columns: 1fr; gap: 20px; }.panel { padding: 22px; }.panel .ph .dim { font-size: 10px; }.top10 .w { font-size: 12px; }.top10 .w span { font-size: 10px; }.top10 li { gap: 13px; }.how { padding: 26px; }.faq { grid-template-columns: 1fr; gap: 24px; }.faq-intro { padding-right: 140px; min-height: 150px; position: relative; }.villager-scene { position: absolute; right: 0; top: 0; padding: 20px 10px 0; width: 100px; margin: 0; border: 0; }.villager-scene > img:first-of-type { width: 65px; height: 90px; }.villager-bubble { top: 0; left: -35px; font-size: 10px; padding: 6px 9px; }.villager-scene .trade-emerald { width: 25px; height: 25px; position: absolute; right: 0; top: 55px; }.closing { gap: 25px; }.closing-creeper { display: none; }.closing h2 { font-size: 23px; }.closing p { font-size: 10px; }.foot { margin-left: 24px; margin-right: 24px; }
}
@media (max-width: 580px) {
  section[id],#find { scroll-margin-top: 82px; }.top { height: 66px; flex-wrap: nowrap; padding: 0 16px; }.logo { font-size: 24px; }.links { display: none; }.wallet { margin-left: auto; font-size: 10px; padding: 10px; }.hero { min-height: 660px; padding: 55px 18px 100px; }.hero-art img { width: 170%; max-width: none; margin-left: -35%; object-position: center bottom; }.hero h1 { font-size: 90px; letter-spacing: -6px; -webkit-text-stroke: 1px #2c2c2b; }.world-subtitle { margin-top: 19px; font-size: 16px; letter-spacing: 3px; }.splash { top: 58px; left: 60%; font-size: 8px; width: 155px; }.hero-copy > p { margin: 28px auto 22px; max-width: 340px; font-size: 12px; line-height: 1.9; }.hero-actions { width: 320px; }.pixel-button { font-size: 13px; padding: 13px; }.menu-row .pixel-button { font-size: 10px; padding: 12px 4px; }.hero-notes { margin-top: 23px; font-size: 8px; }.hero-mob.mob-sheep { left: 8% !important; bottom: 69px; width: 87px; }.hero-mob.mob-pig { right: 9% !important; bottom: 59px; width: 92px; }.hero-mob.mob-creeper { right: 2%; bottom: 148px; width: 56px; }.hero-mob.mob-bee { width: 44px; left: 3%; top: 30%; }.scroll-cue { font-size: 9px; bottom: 26px; }
  .town-section,.tiers,.town-life,.crew-sec,.how,.faq,.closing { width: calc(100% - 32px); }.town-section { padding-top: 33px; }.section-heading { display: block; margin-bottom: 21px; }.section-heading > div { padding-left: 36px; }.section-heading > div::before { width: 26px; height: 40px; top: 13px; left: -3px; }.section-heading .eyebrow { font-size: 8px; letter-spacing: .7px; }.section-heading h2 { font-size: 22px; line-height: 1.6; margin-top: 5px; }.section-heading > p { max-width: none; font-size: 10px; margin: 12px 0 0 36px; }.section-heading > p br { display: inline; }.section-heading > p br::after { content: " "; }
  .world-toolbar { padding: 11px; border-width: 3px; }.world-toolbar > span { font-size: 9px; gap: 6px; }.world-toolbar em { display: none; }.world-toolbar > div { gap: 8px; }.connection { font-size: 8px; }.expand-view { padding-left: 7px; }.expand-view span { display: none; }.stage { padding: 5px; border-width: 3px; gap: 5px; }.view { aspect-ratio: 1/1; }.hud { top: 9px; left: 9px; }.chip { font-size: 9px; padding: 5px 6px; }.working { top: 47px; left: 9px; font-size: 9px; max-width: calc(100% - 18px); }.cams { bottom: 9px; left: 9px; right: auto; flex-wrap: nowrap; padding: 3px; gap: 3px; }.cams button { font-size: 9px; padding: 7px 10px; }.lower { bottom: 75px; left: 9px; right: 9px; padding: 8px; gap: 8px; grid-template-columns: 26px 1fr; }.lower .av { width: 26px; height: 26px; font-size: 14px; }.lower .who { font-size: 10px; }.lower p { font-size: 10px; }
  .side { display: flex; }.find { border-right: 0; border-bottom: 3px solid #171a13; padding: 21px 18px; gap: 12px; }.find .eyebrow { font-size: 9px; }.find h2 { font-size: 24px; }.find p { font-size: 11px; }.find input { font-size: 10px; padding: 13px 9px; }.find form button { font-size: 11px; padding: 0 11px; }.phantom { font-size: 12px; padding: 12px; }.wallet-note { font-size: 9px; }.sh { padding: 18px 18px 10px; }.news { padding: 0 18px 14px; max-height: 260px; flex: auto; }.news li { font-size: 10px; }.card b { font-size: 12px; }.card span { font-size: 10px; }.card .acts button { font-size: 11px; min-height: 40px; }
  .stats { grid-template-columns: 1fr 1fr; padding: 7px; gap: 5px; }.stat { padding: 13px 10px; min-height: 148px; }.stat > span { font-size: 9px; }.stat > b { font-size: 21px; }.stat > em { font-size: 8px; }.world-footnote { flex-direction: column; gap: 5px; font-size: 8px; }
  .tiers { padding: 42px 0 30px; }.tier-list { grid-template-columns: 1fr 1fr; gap: 10px; padding: 9px; }.tier,.tier:nth-child(4),.tier:nth-child(5) { grid-column: auto; }.tier:nth-child(5) { grid-column: 1/-1; width: calc(50% - 5px); justify-self: center; }.tier { padding: 0 9px 12px; }.tier-scene { margin: 0 -9px 4px; width: calc(100% + 18px); height: 120px; }.tier h3 { font-size: 15px; }.tier .pct,.tier .n { font-size: 8px; }.tier p { font-size: 9px; line-height: 1.9; min-height: 91px; }.tier-caption { font-size: 9px; }.tier-caption i { margin: 0 2px; }
  .town-life { padding: 38px 0; }.town-life::before { left: -16px; right: -16px; }.cave-decoration { right: 0; opacity: .35; }.panel { padding: 18px 13px; }.panel .ph h3 { font-size: 12px; }.panel .ph .dim { font-size: 8px; }.panel .text-link { font-size: 9px; }.top10 li { gap: 8px; grid-template-columns: 18px 26px minmax(0,1fr) auto; }.top10 .ico { width: 26px; height: 26px; }.top10 .w { font-size: 10px; }.top10 .w span { font-size: 8px; }.top10 .p { font-size: 10px; }.top10 .p em { font-size: 7px; }.market-panel .lede { font-size: 10px; }.weather-key { font-size: 8px; gap: 10px; }#chart { height: 280px; }
  .crew-sec { padding: 40px 0; }.crew { grid-template-columns: 1fr; }.mate { padding: 19px; gap: 12px; }.mate .ti,.mate .st { font-size: 11px; }.mate .say { min-height: 0; font-size: 12px; }.how { margin-top: 0; padding: 24px 19px; }.how .section-heading > div { padding-left: 38px; }.how .section-heading > div::before { width: 28px; }.how .section-heading > p { margin-left: 38px; }.how h2 { font-size: 22px; }.steps { grid-template-columns: 1fr; gap: 25px; }.step { display: grid; grid-template-columns: 31px 1fr; column-gap: 14px; }.step .n { grid-row: 1/3; margin: 0; }.step h3 { font-size: 12px; margin-top: 4px; }.step p { grid-column: 2; font-size: 10px; line-height: 1.9; margin-top: 7px; }
  .faq { padding-top: 45px; gap: 18px; }.faq-intro { padding-right: 92px; min-height: 150px; }.faq-intro .eyebrow { font-size: 8px; }.faq-intro h2 { font-size: 24px; }.faq-intro > p { font-size: 10px; }.villager-scene { top: 25px; width: 80px; }.villager-bubble { left: -5px; font-size: 9px; }.villager-scene .trade-emerald { right: -5px; top: 70px; width: 23px; height: 23px; }.faq-list { padding: 6px 14px; }.faq summary { font-size: 10px; min-height: 65px; padding: 15px 0; gap: 15px; }.faq details p { font-size: 10px; padding-right: 0; }
  .closing { margin-top: 38px; flex-direction: column; text-align: center; padding: 30px 18px; gap: 21px; }.portal { width: 72px; height: 102px; border-width: 12px; }.closing .eyebrow { font-size: 8px; }.closing h2 { font-size: 23px; }.closing p { font-size: 10px; line-height: 1.9; }.closing .pixel-button { font-size: 11px; }.foot { margin: 30px 16px 0; padding: 22px 0 28px; gap: 18px; }.foot .dim { font-size: 8px; }.foot #footPool { width: 100%; margin-left: 0; font-size: 8px; }.sheet { padding: 18px 14px; }.sheet h2 { font-size: 18px; }.sheet .dim { font-size: 10px; }.sheet .acts button { font-size: 10px; }
}
.hero h1 { width: 640px; max-width: 100%; font-size: 0; line-height: 1; text-shadow: none; transform: none; -webkit-text-stroke: 0; }
.hero h1 img { width: 100%; height: auto; display: block; filter: drop-shadow(3px 4px 0 #1d2b2144); }
.world-subtitle { margin-top: 6px; }
.splash { top: 84px; left: 74%; }
@media (max-width: 1100px) { .hero h1 { width: 560px; }.splash { top: 74px; left: 70%; } }
@media (max-width: 820px) { .hero h1 { width: 460px; }.splash { top: 62px; left: 70%; } }
@media (max-width: 580px) { .hero h1 { width: min(340px, calc(100vw - 40px)); }.splash { top: 48px; left: 52%; width: 145px; }.world-subtitle { margin-top: 13px; }.hero-mob.mob-bee { top: auto; bottom: 158px; left: 8%; width: 38px; }.hero-mob.mob-creeper { width: 48px; bottom: 125px; } }
@media (max-width: 360px) { .splash { left: 48%; width: 140px; font-size: 7px; }.hero-notes { font-size: 7px; } }
/* Texture-mapped builds and mobs keep their natural model proportions. */
.logo > img { width: 48px; height: 48px; object-fit: contain; flex: none; }
.logo-sub { left: 58px; }
.foot .logo > img { width: 32px; height: 32px; }
@media (max-width: 820px) { .top .logo > img { width: 40px; height: 40px; } }
@media (max-width: 360px) { .top .logo { font-size: 21px; gap: 7px; }.top .logo > img { width: 36px; height: 36px; } }
.hero::before { background: linear-gradient(#10213b13, #13251a26 48%, #14241633); }
.hero-mob { filter: drop-shadow(4px 7px 0 #13230f30); }
.hero-mob.mob-creeper { height: 166px; width: 88px; bottom: 100px; }
.tier-scene { height: 166px; background: linear-gradient(#597c9199,#9db1a333),#536759; border-bottom-color: #52574b; }
.tier-scene::before { height: 34px; background: #394e35; opacity: .35; }
.tier-scene::after { background: none; }
.tier-build { width: calc(100% - 12px); height: 138px; object-fit: contain; margin-top: 19px; filter: drop-shadow(3px 5px 0 #14241333); transition: transform .2s steps(4,end); }
.tier:hover .tier-build { transform: translateY(-3px); }
.tier-level { z-index: 1; background: #30352e; }
.villager-scene > img:first-of-type { object-fit: contain; }
.portal { background: url('/media/minecraft/nether_portal.png') 0 0 / 36px 1152px; animation: portal-texture 3.2s steps(32,end) infinite; }
.portal i { background: #c781ff; opacity: .12; }
@keyframes portal-texture { to { background-position-y: -1152px; } }
@media (max-width: 1100px) { .tier-scene { height: 145px; }.tier-build { height: 118px; }.hero-mob.mob-creeper { height: 140px; width: 70px; bottom: 110px; } }
@media (max-width: 580px) { .tier-scene { height: 137px; }.tier-build { height: 110px; }.hero-mob.mob-creeper { height: 100px; width: 48px; bottom: 125px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }*,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }.hero-art { --hero-shift: 0px; will-change: auto; }.reveal-ready [data-reveal] { opacity: 1; transform: none; } }