: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}.hud.bag-open .hotbar{display:none}.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,54rem);max-height:92vh;box-shadow:0 8px 0 var(--ink);touch-action:pan-y;border-radius:1.2rem;flex-direction:column;gap:.7rem;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-body{grid-template-columns:auto 1fr;align-items:start;gap:1.4rem;display:grid}@media (width<=760px){.bag-body{grid-template-columns:1fr;justify-items:center}}.loadout{border:3px solid var(--ink);background:#f3efe3;border-radius:1rem;grid-template-columns:auto 9rem auto;grid-template-areas:"weapon doll head""utility doll armor""hand hand hand";place-items:center;gap:.6rem .8rem;padding:.8rem 1rem;display:grid}.equip-weapon{grid-area:weapon}.equip-utility{grid-area:utility}.equip-head{grid-area:head}.equip-armor{grid-area:armor}.equip-cell{flex-direction:column;align-items:center;gap:.2rem;font-size:.75rem;display:flex}.slot.equip{width:4.2rem;height:4.2rem}.slot.equip.empty{border-style:dashed}.slot.equip.empty .glyph{opacity:.4;width:60%;height:60%}.doll{text-align:center;grid-area:doll;width:9rem;margin:0;position:relative}.doll svg{width:100%;height:auto;display:block}.doll-body,.doll-limb{fill:var(--bean);stroke:var(--ink);stroke-width:4px}.doll-eye{fill:var(--ink)}.doll-shadow{fill:#1b1b2f33}.doll-armor{fill:hsl(var(--h) 35% 45% / .9);stroke:var(--ink);stroke-width:3px}.doll-hat,.doll-head{object-fit:contain;pointer-events:none;width:4.4rem;height:4.4rem;position:absolute;top:-.9rem;left:50%;transform:translate(-50%)}.doll-head>*{object-fit:contain;width:100%;height:100%}.doll-hand{border:3px solid var(--ink);background:#fff;border-radius:50%;place-items:center;width:2.8rem;height:2.8rem;padding:.25rem;display:grid;position:absolute;top:42%;right:-.5rem}.doll-hand img,.doll-hand .tile,.doll-hand .glyph{object-fit:contain;width:100%;height:100%}.doll figcaption{margin-top:.2rem;font-weight:800}.in-hand{grid-area:hand;margin:0;font-size:.9rem}.storage h2{margin:.2rem 0 .4rem}.bag-grid{grid-template-columns:repeat(var(--cols,6), 3.6rem);gap:.4rem;display:grid}.bag-hotbar{margin-bottom:.6rem}.bag-hotbar .slot{border-color:var(--accent)}@media (width<=480px){.bag-grid{grid-template-columns:repeat(var(--cols,6), 3rem)}.bag-grid .slot{width:3rem;height:3rem}}.bag .slot{touch-action:none}.slot .tile,.slot .glyph{pointer-events:none}.slot>.glyph{opacity:.6;width:70%;height:70%;margin:auto;display:block}.slot.picked{background:var(--accent-2);outline:3px dashed var(--accent);outline-offset:2px}.slot.pending{opacity:.6}.slot.pending:after{content:"";border:3px solid var(--ink);border-top-color:#0000;border-radius:50%;animation:.8s linear infinite spin;position:absolute;inset:.6rem}.slot.drop-ok{outline:3px solid var(--leaf);outline-offset:2px;background:#d9f7c9}.slot.drop-no{outline-offset:2px;background:#ffd9d0;outline:3px solid #d8231a}.slot.landed{animation:.6s ease-out landed}.slot.refused{animation:.4s ease-in-out refused}@keyframes landed{0%{background:#d9f7c9;transform:scale(1.15)}}@keyframes refused{25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes spin{to{transform:rotate(360deg)}}.hand-mark{background:var(--accent);border:2px solid var(--ink);border-radius:50%;width:.65rem;height:.65rem;position:absolute;top:.2rem;right:.25rem}.tile{width:100%;height:100%;color:hsl(var(--h) 45% 25%);background:hsl(var(--h) 60% 85%);border-radius:.55rem;place-items:center;display:grid;position:relative}.tile .glyph{width:62%;height:62%}.tile b{font-size:.62rem;position:absolute;bottom:.05rem;left:.2rem}.wear{background:#1b1b2f40;border-radius:.2rem;height:.3rem;position:absolute;bottom:.25rem;left:.35rem;right:.35rem;overflow:hidden}.wear i{background:var(--leaf);height:100%;display:block}.wear.low i{background:#d8231a}.bag-detail{border:3px solid var(--ink);background:#fff;border-radius:.8rem;min-height:3.2rem;padding:.6rem .8rem}.bag-detail p{margin:.2rem 0}.detail-item{align-items:center;gap:.7rem;display:flex}.detail-icon{flex:none;width:3.2rem;height:3.2rem;position:relative}.detail-icon img,.detail-icon .tile{object-fit:contain;width:100%;height:100%;display:block}.detail-icon .count{font-size:.85rem;position:absolute;bottom:0;right:0}.detail-actions{flex-wrap:wrap;gap:.4rem;margin-top:.3rem;display:flex}.detail-actions button{padding:.4rem .8rem}.bag-status{min-height:1.3em;margin:0;font-weight:800}.bag-status.good{color:#1b7f4b}.bag-status.bad{color:#b3261e}.drag-ghost{z-index:30;background:var(--paper);border:3px solid var(--ink);width:3.4rem;height:3.4rem;box-shadow:0 6px 0 var(--ink);opacity:.92;pointer-events:none;border-radius:.8rem;padding:.2rem;position:fixed;top:0;left:0}.drag-ghost img,.drag-ghost .tile{object-fit:contain;width:100%;height:100%;display:block}.drag-ghost .count{font-size:.85rem;position:absolute;bottom:0;right:.2rem}#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}}.crosshair{pointer-events:none;width:22px;height:22px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.crosshair:before,.crosshair:after{content:"";background:var(--paper);box-shadow:0 0 0 1.5px var(--ink);border-radius:2px;position:absolute}.crosshair:before{width:3px;height:100%;top:0;left:50%;transform:translate(-50%)}.crosshair:after{width:100%;height:3px;top:50%;left:0;transform:translateY(-50%)}.floaters{pointer-events:none;position:absolute;inset:0;overflow:hidden}.floater{color:var(--paper);font-size:calc(1.15rem * var(--ui-scale,1));-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;font-weight:900;animation:.9s ease-out forwards floater-rise;position:absolute;transform:translate(-50%,-50%)}.floater.taken{color:#ff6b5e}@keyframes floater-rise{0%{opacity:1;translate:0}to{opacity:0;translate:0 -2.4rem}}.reduce-motion .floater{animation:.9s linear forwards floater-fade}@keyframes floater-fade{to{opacity:0}}.bars{pointer-events:none;position:absolute;inset:0}.npc-bar{background:var(--ink);border:2px solid var(--ink);border-radius:.3rem;width:3.2rem;height:.45rem;position:absolute;top:0;left:0;overflow:hidden}.npc-bar i{background:#f2c14e;height:100%;transition:width .15s ease-out;display:block}.npc-bar.hostile i{background:#ff6b5e}.hurt-flash{pointer-events:none;opacity:0;position:absolute;inset:0;box-shadow:inset 0 0 6rem 1rem #d6332a}.hurt-flash.on{animation:.45s ease-out hurt-flash}@keyframes hurt-flash{0%{opacity:.85}to{opacity:0}}.reduce-motion .hurt-flash.on{animation-duration:.2s}.bag-detail .stats{margin-top:.2rem;font-weight:800}