:root{--ink:#1b1b2f;--paper:#fffdf5;--accent:#ff5a36;--accent-2:#ffc93c;--sea:#1f8fb0;--leaf:#43c16f;--ui-scale:1;font-family:system-ui,sans-serif;font-size:calc(16px * var(--ui-scale))}*{box-sizing:border-box}body{color:var(--ink);touch-action:none;-webkit-user-select:none;user-select:none;background:#0d2a3a;margin:0;overflow:hidden}canvas{display:block}[hidden]{display:none!important}kbd{min-width:1.6em;font:inherit;text-align:center;border:2px solid var(--ink);box-shadow:0 2px 0 var(--ink);background:#fff;border-radius:.35em;padding:0 .35em;font-size:.85em;font-weight:800;display:inline-block}button{font:inherit;color:var(--ink);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);cursor:pointer;background:#fff;border-radius:.8rem;padding:.6rem 1rem;font-weight:800}button:hover:not(:disabled){background:#fff4d6}button:active:not(:disabled){box-shadow:0 1px 0 var(--ink);transform:translateY(3px)}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}button.big{background:var(--accent-2);font-size:1.3rem}button.big:hover:not(:disabled){background:#ffd766}button.accent{color:#fff;background:var(--accent)}button.accent:hover:not(:disabled){background:#ff7352}button[aria-pressed=true]{background:var(--accent-2)}input[type=text],input:not([type]),select{font:inherit;min-width:0;color:var(--ink);border:3px solid var(--ink);background:#fff;border-radius:.7rem;padding:.55rem .7rem;font-weight:600}input[type=range]{accent-color:var(--accent)}input[type=checkbox],input[type=radio]{width:1.2rem;height:1.2rem;accent-color:var(--accent)}.menus{z-index:30;pointer-events:none;place-items:center;padding:1rem;display:grid;position:fixed;inset:0}.menus>*{pointer-events:auto}.menus-none{display:none}.menus-pause,.menus-lost,.menus-death,.menus-joining,.menus-voice{background:#0d1a2acc}.menus-settings,.menus-how{background:#0d1a2a99}.menu{background:var(--paper);border:4px solid var(--ink);width:min(92vw,26rem);max-height:92vh;box-shadow:0 8px 0 var(--ink);border-radius:1.2rem;flex-direction:column;gap:.6rem;padding:1.4rem;animation:.18s ease-out pop;display:flex;overflow:auto}@keyframes pop{0%{opacity:0;transform:translateY(12px)scale(.97)}}.menu.side{justify-self:start;margin-left:4vw}@media (aspect-ratio<=11/10){.menu.side{place-self:end center;max-height:58vh;margin:0 0 .5rem}}.menu.wide{gap:.8rem;width:min(96vw,52rem);max-height:94vh;padding:1.4rem 1.8rem}h1{margin:0;font-size:1.8rem;font-weight:900}h2{margin:.5rem 0 0;font-size:1.05rem;font-weight:900}p{margin:0;line-height:1.4}.fine{opacity:.75;font-size:.85rem}.row{gap:.6rem;display:flex}.row>*{flex:1}.logo{letter-spacing:.01em;color:var(--accent-2);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--ink);margin:0;font-size:clamp(2.2rem,5vw,3.2rem);font-weight:900;line-height:1;transform:rotate(-2deg)}.tagline{margin-bottom:.4rem;font-weight:700}.welcome{border:3px solid var(--ink);background:#fff4d6;border-radius:.9rem;flex-direction:column;gap:.4rem;padding:.8rem;display:flex}.welcome label,.rename label{font-weight:800}.welcome .row>button{flex:none}.who{text-align:left;font-weight:600}.online{color:#1b7f4b;min-height:1.2em;font-weight:700}.menus-loading{background:#0d2a3a url(/ui/island-key-art.webp) 50%/cover no-repeat}.loading{flex-direction:column;align-self:end;align-items:center;gap:1rem;margin-bottom:8vh;display:flex}.loading .logo{-webkit-text-stroke-width:5px;text-shadow:0 8px 0 var(--ink);font-size:clamp(3rem,9vw,6rem)}.loading-bar{background:var(--paper);border:4px solid var(--ink);width:min(26rem,75vw);height:1.4rem;box-shadow:0 5px 0 var(--ink);border-radius:1rem;overflow:hidden}.loading-bar-fill{background:repeating-linear-gradient(-45deg, var(--accent-2) 0 12px, #ffb800 12px 24px);width:0;height:100%;transition:width .2s}.loading-text{color:var(--paper);background:#1b1b2fb0;border-radius:.6rem;padding:.2rem .8rem;font-weight:800}.customise .rename{flex-direction:column;gap:.3rem;display:flex}.customise .rename .row>button{flex:none}.saved{color:#1b7f4b;font-size:.85rem;font-weight:700}.shelf{flex-wrap:wrap;gap:.5rem;display:flex}.swatch{background:var(--c);border-radius:50%;width:2.4rem;height:2.4rem;padding:0}.swatch:hover:not(:disabled),.swatch[aria-pressed=true]{background:var(--c)}.swatch[aria-pressed=true]{outline:4px solid var(--accent-2);outline-offset:2px}.item.icon{flex-direction:column;align-items:center;gap:.1rem;width:4.6rem;padding:.3rem;font-size:.72rem;display:flex}.item.icon img{object-fit:contain;width:3rem;height:3rem}.how-grid{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.8rem;display:grid}.how-grid>div{border:3px solid var(--ink);background:#fff;border-radius:.9rem;padding:.8rem}.how-grid h2{margin:0 0 .3rem}.choices{grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.7rem;display:grid}.choices button{text-align:left;flex-direction:column;gap:.3rem;display:flex}.choices button span{font-size:.9rem;font-weight:500}.settings-head{justify-content:space-between;align-items:center;display:flex}.tabs{flex-wrap:wrap;gap:.4rem;margin-bottom:.6rem;display:flex}.tabs button{padding:.4rem .8rem;font-size:.9rem}.tabs button[aria-selected=true]{background:var(--accent-2)}.tab-body{flex-direction:column;gap:.7rem;display:flex}.setting{grid-template-columns:minmax(9rem,14rem) 1fr 3.5rem;align-items:center;gap:.8rem;font-weight:700;display:grid}.setting output{font-variant-numeric:tabular-nums;text-align:right}.setting.check{gap:.6rem;display:flex}.setting.check small{opacity:.75;font-weight:500;display:block}.setting select{grid-column:span 2}.setting.choice{border:3px solid var(--ink);border-radius:.8rem;flex-wrap:wrap;gap:1rem;margin:0;padding:.6rem .8rem;display:flex}.setting.choice legend{padding:0 .3rem;font-weight:900}.setting.choice label{align-items:center;gap:.4rem;display:flex}.binds{grid-template-columns:repeat(auto-fill,minmax(18rem,1fr));gap:.4rem 1.2rem;display:grid}.bind{justify-content:space-between;align-items:center;gap:.6rem;display:flex}.bind .key{min-width:7rem;padding:.3rem .6rem;font-size:.9rem}.bind .key.clash{background:#ffd9d0}.bind .key.listening{background:var(--accent-2)}.pad-layout{border-collapse:collapse}.pad-layout th,.pad-layout td{text-align:left;padding:.25rem 1rem .25rem 0}.players{flex-direction:column;gap:.35rem;margin:0;padding:0;list-style:none;display:flex}.players li{justify-content:space-between;align-items:center;gap:.6rem;font-weight:700;display:flex}.players li button{padding:.25rem .7rem;font-size:.85rem}.players .empty{opacity:.7;font-weight:500}.hud{z-index:10;pointer-events:none;color:var(--paper);font-weight:800;position:fixed;inset:0}.hud-stats{color:var(--ink);background:var(--paper);border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink);border-radius:.9rem;gap:.35rem;padding:.7rem .9rem;font-size:.8rem;display:grid;position:absolute;bottom:1rem;left:1rem}.stat{grid-template-columns:5.8rem 8rem 2rem;align-items:center;gap:.5rem;display:grid}.stat output{text-align:right;font-variant-numeric:tabular-nums}.stat-temperature{grid-template-columns:5.8rem auto}.bar{border:2px solid var(--ink);background:#e8e3d4;border-radius:.5rem;height:.8rem;overflow:hidden}.fill{height:100%;transition:width .3s;display:block}.stat-health .fill{background:#ff4d5e}.stat-hunger .fill{background:#ff8c42}.stat-thirst .fill{background:#4fa8ff}.stat.low .stat-name{color:#d8231a}.minimap{border:4px solid var(--ink);width:10rem;height:10rem;box-shadow:0 5px 0 var(--ink);border-radius:50%;position:absolute;top:1rem;right:1rem;overflow:hidden}.minimap canvas{width:100%;height:100%}.hotbar{pointer-events:auto;gap:.4rem;display:flex;position:absolute;bottom:1rem;left:50%;transform:translate(-50%)}.held-name{white-space:nowrap;text-shadow:0 2px 0 var(--ink), 0 0 4px var(--ink);position:absolute;bottom:calc(100% + .4rem);left:50%;transform:translate(-50%)}.slot{background:#fffdf5e6;border-radius:.8rem;width:3.6rem;height:3.6rem;padding:.2rem;position:relative}.slot.empty{background:#fffdf599}.slot.selected{background:var(--accent-2);outline:3px solid var(--paper);outline-offset:1px}.slot img{object-fit:contain;pointer-events:none;width:100%;height:100%;display:block}.slot .count{color:var(--ink);text-shadow:0 0 3px #fff,0 0 3px #fff;font-size:.85rem;position:absolute;bottom:.05rem;right:.2rem}.slot-key{opacity:.7;font-size:.7rem;position:absolute;top:.05rem;left:.3rem}.prompt{color:var(--ink);background:var(--paper);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);white-space:nowrap;border-radius:.8rem;padding:.5rem .9rem;position:absolute;bottom:7.5rem;left:50%;transform:translate(-50%)}.prompt .need{color:#b3261e}.toasts{flex-direction:column;align-items:center;gap:.4rem;display:flex;position:absolute;top:5.5rem;left:50%;transform:translate(-50%)}.toast{color:var(--ink);background:var(--paper);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);border-radius:.8rem;padding:.4rem .9rem;transition:opacity .5s,transform .5s}.toast.good{background:#d9f7c9}.toast.bad{background:#ffd9d0}.toast.gone{opacity:0;transform:translateY(-8px)}.connection{color:var(--ink);background:var(--accent-2);border:3px solid var(--ink);border-radius:.8rem;padding:.35rem .8rem;position:absolute;top:1rem;left:50%;transform:translate(-50%)}.clicklook{opacity:.85;text-shadow:0 2px 0 var(--ink);font-size:.85rem;position:absolute;top:1rem;left:1rem}.tags{position:absolute;inset:0;overflow:hidden}.tag{white-space:nowrap;color:var(--ink);border:2px solid var(--ink);background:#fffdf5d9;border-radius:.6rem;padding:.1rem .5rem;font-size:.8rem;position:absolute;top:0;left:0}.tag.sleeping{opacity:.75;font-style:italic}.bag{color:var(--ink);pointer-events:auto;background:#0d1a2a99;place-items:center;padding:1rem;display:grid;position:absolute;inset:0}.bag-inner{background:var(--paper);border:4px solid var(--ink);width:min(96vw,50rem);max-height:92vh;box-shadow:0 8px 0 var(--ink);border-radius:1.2rem;flex-direction:column;gap:.6rem;padding:1.2rem 1.4rem;animation:.18s ease-out pop;display:flex;overflow:auto}.bag-head{justify-content:space-between;align-items:center;display:flex}.bag-cols{grid-template-columns:auto 1fr;gap:1.4rem;display:grid}@media (width<=720px){.bag-cols{grid-template-columns:1fr}}.bag-grid{grid-template-columns:repeat(var(--cols,6), 3.6rem);gap:.4rem;margin-top:.5rem;display:grid}.bag-grid .slot:nth-child(-n+6){border-color:var(--accent)}.recipes{flex-direction:column;gap:.5rem;margin:.5rem 0 0;padding:0;list-style:none;display:flex}.recipe{border:3px solid var(--ink);background:#fff;border-radius:.8rem;grid-template-columns:1fr auto;align-items:center;gap:.3rem .8rem;padding:.5rem .7rem;display:grid}.recipe:not(.can){background:#f3efe3}.recipe-out{align-items:center;gap:.5rem;display:flex}.recipe-out img{width:2.6rem;height:2.6rem}.recipe-in{flex-wrap:wrap;grid-column:1;gap:.6rem;font-size:.85rem;display:flex}.recipe button{grid-area:1/2/span 2}.need{color:#b3261e;align-items:center;gap:.15rem;display:flex}.need.ok{color:#1b7f4b}.need img{width:1.6rem;height:1.6rem}#touch{z-index:5;pointer-events:none;position:fixed;inset:0}.touch{opacity:var(--touch-opacity,.8);position:absolute;inset:0}.touch>*{pointer-events:auto}.touch-look{opacity:0;position:absolute;inset:0}.touch-stick{width:var(--stick,130px);height:var(--stick,130px);border:3px solid var(--paper);background:#fffdf540;border-radius:50%;place-items:center;display:grid;position:absolute;bottom:11rem;left:1.5rem}.touch-knob{background:var(--paper);border:3px solid var(--ink);border-radius:50%;width:40%;height:40%}.touch-buttons{grid-template-columns:repeat(2,4.2rem);gap:.6rem;display:grid;position:absolute;bottom:11rem;right:1.2rem}.touch-buttons button{border-radius:50%;height:4.2rem;padding:0;font-size:.85rem}.touch-buttons button.down{background:var(--accent-2)}.touch-pause{padding:.3rem .8rem;position:absolute;top:1rem;left:50%;transform:translate(-50%)}.touch.left-handed .touch-stick{left:auto;right:1.5rem}.touch.left-handed .touch-buttons{left:1.2rem;right:auto}.high-contrast{--paper:#fff;--ink:#000}.high-contrast .hud,.high-contrast .tag{text-shadow:none}.high-contrast .fine{opacity:1}.reduce-motion *,.reduce-motion :before,.reduce-motion :after{transition:none!important;animation:none!important}@media (prefers-reduced-motion:reduce){.menu,.bag-inner{animation:none}}