@font-face{font-family:Monocraft;src:url(/assets/monocraft.woff2) format("woff2");font-display:swap}
@font-face{font-family:Atkinson;src:url(/assets/atkinson-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Atkinson;src:url(/assets/atkinson-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  color-scheme:dark;
  --text:#e9e2d4;
  --muted:#ab9f8e;
  --yellow:#ffff55;
  --gui:#c6c6c6;
  --gui-text:#3f3f3f;
  --stone:#727272;
  --pixel:"Monocraft",ui-monospace,monospace;
  --body:"Atkinson",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{background:#291d14}
body{
  margin:0;min-height:100vh;display:flex;flex-direction:column;
  color:var(--text);font:17px/1.6 var(--body);
  background:#291d14 url(/assets/dirt.webp) 0 0/64px;
  image-rendering:pixelated;
}
img{image-rendering:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--pixel);font-weight:400;line-height:1.2;margin:0}
p{margin:0 0 1em}
.wrap{width:min(1080px,calc(100% - 40px));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Top bar */
.top{position:relative;background:#1a1a1a;border-bottom:2px solid #000;box-shadow:inset 0 -2px #333}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:8px 20px;min-height:56px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--pixel);font-size:18px;text-decoration:none;color:#fff;text-shadow:2px 2px 0 #3f3f3f}
.brand img{width:24px;height:24px;image-rendering:pixelated}
.nav{display:flex;flex-wrap:wrap;gap:0 2px;margin:0;padding:0;list-style:none}
.nav a{display:block;padding:8px 12px;font-family:var(--pixel);font-size:15px;text-decoration:none;color:#d0d0d0}
.nav a:hover{color:#fff}
.nav a[aria-current=page]{color:var(--yellow);text-shadow:2px 2px 0 #3f3f15}

/* Banner + grass line. The splash is placed in banner-image pixels (2172x724)
   so it stays at the end of the logo however the image is cropped. */
.banner{--h:min(33.34vw,460px);position:relative;background:#3b2a1d;overflow:hidden;container-type:inline-size}
.banner img{display:block;width:100%;height:var(--h);object-fit:cover;object-position:50% 45%}
.grass{height:32px;background:url(/assets/grass-edge.webp) 0 0/32px repeat-x}
.splash{
  --s:max(100cqw / 2172, var(--h) / 724);
  position:absolute;left:min(calc(50% + 615 * var(--s)),calc(100% - 4.2em));top:calc((var(--h) - 724 * var(--s)) * .45 + 405 * var(--s));
  margin:0;font-family:var(--pixel);font-size:max(11px,calc(48 * var(--s)));line-height:1;color:#ff0;white-space:nowrap;pointer-events:none;
  text-shadow:.09em .09em 0 #3f3f00,0 0 .06em #000,0 0 .3em rgba(0,0,0,.9),0 0 .7em rgba(0,0,0,.6);
  transform:translate(-50%,-50%) rotate(-20deg);
}
@media (prefers-reduced-motion:no-preference){
  .splash{animation:splash .5s ease-in-out infinite alternate}
  @keyframes splash{to{transform:translate(-50%,-50%) rotate(-20deg) scale(1.09)}}
}

main{flex:1;padding:48px 0 72px}
.intro>*,.access>*{min-width:0}

/* Second introduction page: the game view fades directly into the page. */
.guide-pagination{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:42px;padding-top:22px;border-top:1px solid #65503b;font-size:14px;color:var(--muted)}
.guide-pagination .btn{width:auto;margin:0;font-size:14px}
.journey{background:#291d14}
.journey>.grass{display:none}
.journey-hero{position:relative;overflow:hidden;background:#291d14}
.journey-hero img{display:block;width:100%;height:clamp(330px,51vw,780px);object-fit:cover;object-position:center 43%}
.journey-hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,transparent 48%,rgba(41,29,20,.15) 62%,rgba(41,29,20,.7) 82%,#291d14 100%)}
.journey main{padding-top:0}
.journey-story{position:relative;margin-top:-68px;max-width:900px;margin-inline:auto}
.journey-heading{position:relative;margin-bottom:26px}
.journey-step{font:13px var(--pixel);color:var(--yellow);margin-bottom:14px}
.journey h1{font-size:clamp(25px,3.7vw,45px);color:#fff;text-shadow:3px 3px #21160f;max-width:22ch;line-height:1.3;text-wrap:balance}
.journey-copy{max-width:63ch;color:var(--text);font-size:19px}
.journey .guide-pagination a{color:var(--yellow);text-decoration:none}
.journey .guide-pagination a:hover{text-decoration:underline}
@media(max-width:600px){
  .journey-hero img{height:auto;aspect-ratio:16/12;object-position:center 43%}
  .journey-hero:after{background:linear-gradient(to bottom,transparent 38%,rgba(41,29,20,.2) 58%,rgba(41,29,20,.8) 80%,#291d14 100%)}
  .journey-story{margin-top:-60px}
  .journey-copy{font-size:17px}
  .journey .guide-pagination{gap:16px}
  .guide-pagination .btn{width:100%}
}

/* Minecraft GUI pieces */
.window{
  background:var(--gui);color:var(--gui-text);padding:22px 22px 24px;
  border:2px solid #000;border-radius:4px;
  box-shadow:inset 3px 3px 0 #fff,inset -3px -3px 0 #555;
}
.window h2{font-size:18px;color:#404040;margin-bottom:16px}
.window p{color:#4a4a4a}
.slot{background:#8b8b8b;box-shadow:inset 2px 2px 0 #373737,inset -2px -2px 0 #fff}

.btn{
  display:block;width:100%;padding:10px 14px;margin-top:12px;
  font:16px var(--pixel);color:#e0e0e0;text-align:center;text-decoration:none;text-shadow:2px 2px 0 #383838;
  background:var(--stone);border:2px solid #000;border-radius:0;cursor:pointer;
  box-shadow:inset 2px 2px 0 #aaa,inset -2px -3px 0 #4c4c4c;
}
.btn:hover,.btn:focus-visible{border-color:#fff;outline:none;color:#ffffa0}
.btn:disabled{background:#2f2f2f;color:#8a8a8a;text-shadow:none;box-shadow:none;border-color:#1a1a1a;cursor:not-allowed}

.tooltip{
  background:rgba(16,0,16,.94);padding:14px 16px;
  border:2px solid #100010;border-radius:3px;
  box-shadow:inset 0 0 0 2px #3a1474;
}

/* Start page */
.intro{display:grid;grid-template-columns:1fr 360px;gap:56px;align-items:start}
.nowrap{white-space:nowrap}
.menu-btn{display:none}
.intro h1{font-size:clamp(28px,4vw,44px);color:#fff;text-shadow:.08em .08em 0 #3f3f3f;margin-bottom:18px}
.intro .lead{color:var(--text);max-width:52ch;font-size:19px}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.steps li{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:center;font-size:15px;color:#3f3f3f}
.steps .slot{width:36px;height:36px;display:grid;place-items:center;font:15px var(--pixel);color:#fff;text-shadow:2px 2px 0 #3f3f3f}
.price{font:28px var(--pixel);color:#404040;margin:18px 0 2px}
.small{font-size:14px}

.address{margin-top:28px;max-width:440px}
.address-label{display:block;font:14px var(--pixel);color:#a0a0a0;margin-bottom:6px}
.address-row{display:flex;gap:10px}
.address input{flex:1;min-width:0;padding:10px 12px;font:18px var(--pixel);color:#fff;background:#000;border:2px solid #a0a0a0;border-radius:0}
.address input:focus{border-color:#fff;outline:none}
.address .btn{width:auto;margin:0;padding:10px 18px}

/* Text pages */
.page{max-width:820px}
.page>h1{font-size:clamp(28px,4vw,40px);color:#fff;text-shadow:.08em .08em 0 #3f3f3f;margin-bottom:10px}
.page>.lead{color:var(--text);font-size:19px;margin-bottom:32px}
.page a:not(.btn){color:var(--yellow)}
.guide{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.guide li{display:grid;grid-template-columns:44px 1fr;gap:16px}
.guide .slot{width:44px;height:44px;display:grid;place-items:center;font:18px var(--pixel);color:#fff;text-shadow:2px 2px 0 #3f3f3f}
.guide h2{font-size:18px;color:#fff;margin:2px 0 6px}
.guide p{margin:0 0 4px;max-width:60ch}

.download{display:grid;grid-template-columns:64px 1fr 220px;gap:20px;align-items:center;max-width:none}
.download h2{margin-bottom:6px;font-size:20px}
.download p{margin:0}
.download .btn{margin:0}
.pack-icon{width:64px;height:64px;image-rendering:pixelated}
.notes{margin-top:36px}
.notes h2{font-size:18px;color:#fff;margin-bottom:10px}
.notes ul{margin:0 0 20px;padding-left:20px}
.notes li{margin-bottom:6px}
.hash{color:var(--muted);overflow-wrap:anywhere}
.hash code{font-size:12px}

/* Mods */
.page:has(.mods){max-width:none}
.modnav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.modnav a{padding:6px 10px;font:14px var(--pixel);color:#e0e0e0;text-decoration:none;background:#1a1a1a;border:2px solid #000}
.modnav a:hover{border-color:#fff}
.modnav span{color:#a0a0a0}
.modgroup{margin-top:36px;scroll-margin-top:16px}
.modgroup h2{font-size:20px;color:#fff;text-shadow:2px 2px 0 #3f3f3f;margin-bottom:14px}
.mods{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.mods li>*{position:relative;display:flex;align-items:center;gap:12px;padding:6px;color:var(--text);text-decoration:none;border:2px solid transparent}
.mods li>:hover,.mods li>:focus-visible{border-color:#fff;outline:none;background:rgba(0,0,0,.35)}
.mods .icon{width:44px;height:44px;flex-shrink:0;display:grid;place-items:center}
.mods .icon img{width:32px;height:32px}
.mods .icon b{font:18px var(--pixel);color:#fff;text-shadow:2px 2px 0 #3f3f3f;font-weight:400}
.mods .name{font-size:15px;line-height:1.3}
.tip{position:absolute;left:58px;bottom:calc(100% - 4px);z-index:5;width:max-content;max-width:300px;font-size:14px;line-height:1.4;color:#aaa;pointer-events:none;visibility:hidden}
.tip strong{display:block;color:#fff;font-weight:400;font-family:var(--pixel);margin-bottom:4px}
.mods li>:hover .tip,.mods li>:focus-visible .tip{visibility:visible}

/* Access page */
.access{display:grid;grid-template-columns:1fr 420px;gap:56px;align-items:start}
.access h1{font-size:clamp(28px,4vw,40px);color:#fff;text-shadow:.08em .08em 0 #3f3f3f;margin-bottom:16px}
.access .side p{max-width:46ch}
.window label{display:block;margin-top:14px;font:14px var(--pixel);color:#404040}
.window input:not([type=checkbox]){
  display:block;width:100%;margin-top:6px;padding:9px 10px;
  font:16px var(--body);color:#fff;background:#000;border:2px solid #a0a0a0;border-radius:0;
}
.window input:not([type=checkbox]):focus{border-color:#fff;outline:none}
.hint{font-size:13px;color:#555;margin-top:4px}
.checkrow{display:flex!important;gap:10px;align-items:flex-start;font:15px/1.4 var(--body)!important;color:#3f3f3f!important;cursor:pointer}
.checkrow input{width:18px;height:18px;margin:1px 0 0;accent-color:#5d9c3a;flex-shrink:0}
.checkrow:has(input:disabled){color:#777!important;cursor:default}
.notice{font-size:14px;color:#4a4a4a;margin:12px 0 0}
.message{font-size:14px;color:#8b0000;margin:12px 0 0;min-height:0}
.message:empty{display:none}
.status{padding:12px;margin-top:4px}
.status strong{display:block;font:15px var(--pixel);color:#fff;text-shadow:2px 2px 0 #3f3f3f}
.status span{color:#f0f0f0;font-size:14px}
.reference{display:block;font:20px var(--pixel);color:#000;padding:6px 0;user-select:all}
.hidden{display:none!important}

/* Book: rules */
.book{
  background:#efe3c8;color:#2b2118;padding:32px 36px;max-width:680px;
  border:2px solid #4a3622;border-radius:3px;box-shadow:inset 0 0 0 4px #d9c8a4,6px 6px 0 rgba(0,0,0,.35);
}
.book h1{font-size:24px;margin-bottom:20px;color:#2b2118}
.book h3{font-size:16px;margin:0 0 6px}
.book p{white-space:pre-line;margin:0 0 18px}
.book .muted{color:#7a6650;font-size:14px}

dialog{width:calc(100% - 32px);max-width:560px;max-height:90vh;overflow:auto;padding:0;border:0;background:none}
dialog::backdrop{background:rgba(0,0,0,.7)}
dialog .book,dialog .window{max-width:none}
.rulesbox{max-height:320px;overflow-y:auto;padding:14px;margin:12px 0;border:2px solid #c9b48c;background:#f6edd8;overscroll-behavior:contain}
.dialogactions{display:flex;gap:10px}
.dialogactions .btn{margin-top:6px}

/* Footer */
footer{background:#1a1a1a;border-top:2px solid #000;color:#8f8f8f;font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 0}
footer button{border:0;background:none;padding:0;color:#bdbdbd;font:inherit;cursor:pointer;text-decoration:underline;margin-left:16px}
footer button:hover{color:#fff}

@media (max-width:820px){
  .intro,.access{grid-template-columns:1fr;gap:32px}
  main{padding:32px 0 56px}
  .nav a{padding:8px 8px;font-size:14px}
  .top .wrap{flex-wrap:nowrap;min-height:52px}
  .intro h1{font-size:min(7.5vw,36px)}
  .address input{font-size:16px;padding:10px}
  .address .btn{padding:10px 12px}
  .menu-btn{display:block;width:auto;margin:0;padding:6px 14px;font-size:15px}
  .top nav{display:none;position:absolute;top:100%;left:0;right:0;z-index:20;padding:12px 20px 16px;background:#1a1a1a;border-bottom:2px solid #000}
  .top.open nav{display:block}
  .nav{flex-direction:column;gap:8px}
  .nav a{padding:10px 14px;font-size:16px;text-align:center;color:#e0e0e0;text-shadow:2px 2px 0 #383838;background:var(--stone);border:2px solid #000;box-shadow:inset 2px 2px 0 #aaa,inset -2px -3px 0 #4c4c4c}
  .nav a[aria-current=page]{border-color:#fff}
  .download{grid-template-columns:48px 1fr}
  .download .btn{grid-column:1/-1}
  .pack-icon{width:48px;height:48px}
  .book{padding:24px 20px}
  .splash{right:4%;bottom:8%}
}