:root{--font: "Press Start 2P", "Courier New", monospace;--bg: #36334b;--bg-glow: #26689f;--panel: rgba(54, 51, 75, .92);--well: #392a25;--edge: #aba4a6;--edge-hi: #f4f4ee;--text: #f4f4ee;--muted: #c2b8a3;--accent: #f4d14b;--accent-edge: #b6691b;--pick: #f2aa66;--info: #9ed6f5;--error: #dd9563;--go: #80bd5f;--go-edge: #458042}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:none;user-select:none;touch-action:none}canvas#game,canvas#ui{position:fixed;inset:0;display:block;width:100vw;height:100vh}canvas#game{cursor:crosshair;image-rendering:pixelated;image-rendering:crisp-edges}canvas#ui{pointer-events:none}#hud{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));left:calc(10px + env(safe-area-inset-left,0px));display:flex;gap:12px;font-size:11px;background:var(--panel);padding:8px 12px;border:2px solid var(--edge)}#ping{color:var(--info)}#hint{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));right:calc(10px + env(safe-area-inset-right,0px));font-size:11px;color:var(--muted);background:var(--panel);padding:8px 12px;border:2px solid var(--edge);max-width:40vw}#chat{position:fixed;left:calc(10px + env(safe-area-inset-left,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));width:min(420px,calc(100vw - 20px));display:flex;flex-direction:column;gap:6px}#chat-log{display:flex;flex-direction:column;gap:4px;max-height:180px;overflow:hidden;font-size:11px;line-height:1.5;opacity:.85;transition:opacity .2s}#chat-log div{background:var(--panel);padding:5px 8px;border-left:3px solid var(--accent);word-break:break-word}#chat-log b{color:var(--accent)}#chat-log .sys{color:var(--muted);border-left-color:#7c7e7a}#chat-input{font:inherit;font-size:12px;color:var(--text);background:var(--panel);border:2px solid var(--edge);padding:12px;outline:none;width:100%;display:none;min-height:44px}#chat.open #chat-input{display:block}#chat.open #chat-log{opacity:1}#join{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,var(--bg-glow) 0%,var(--bg) 70%)}#join.hidden{display:none}#join-form{display:flex;gap:28px;align-items:stretch;max-height:92vh}#join .panel{display:flex;flex-direction:column;align-items:center;gap:16px;padding:25px 29px;width:min(340px,92vw);overflow-y:auto}#join h1{font-size:18px;margin:0;color:var(--accent);text-align:center;line-height:1.4}#join h2{font-size:13px;margin:0;color:var(--accent);text-align:center}#join .sub{font-size:11px;color:var(--muted);margin:-10px 0 0}#preview{width:144px;height:216px;background:var(--go-edge);border:2px solid var(--edge);image-rendering:pixelated}@media (max-width: 760px){#join-form{flex-direction:column;align-items:center;gap:22px;overflow-y:auto;padding:8px 0}#join .panel{overflow:visible;flex:none}}#join .row{display:flex;gap:8px;width:100%}#join input{flex:1;font:inherit;font-size:11px;padding:10px;color:var(--text);background:var(--bg);border:2px solid var(--edge-hi);outline:none;min-width:0}#join input:focus{border-color:var(--accent)}#join button{font:inherit;font-size:11px;padding:10px 14px;cursor:pointer;color:var(--bg);background:var(--accent);border:2px solid var(--accent-edge);border-bottom-width:4px}#join button:active{border-bottom-width:2px;transform:translateY(2px)}#join button#shuffle{background:var(--go);border-color:var(--go-edge);color:var(--bg)}#join button#enter{width:100%}#bodies,#classes{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}#bodies button,#classes button{font-size:11px;padding:12px;min-height:44px;background:var(--well);color:var(--text);border:2px solid var(--edge-hi);border-bottom-width:3px}#bodies button.active,#classes button.active{background:var(--pick);color:var(--bg);border-color:var(--text)}#join-status{font-size:11px;color:var(--error);min-height:1em;margin:0;text-align:center}#status{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}#hpbar,#hungerbar{position:relative;width:240px;height:16px;background:var(--well);border:2px solid var(--edge-hi)}#hungerbar{height:12px}#hungerfill{height:100%;width:100%;background:linear-gradient(#f4d14b,#b6691b);transition:width .3s}#hungerbar.hungry #hungerfill{background:linear-gradient(#d36d51,#8a453b)}#hungertext{position:absolute;inset:0;font-size:11px;line-height:12px;text-align:center;color:var(--text);text-shadow:0 0 3px var(--bg)}#inv span.usable{pointer-events:auto;cursor:pointer}#inv span.usable:hover b{color:var(--text)}#hpfill{height:100%;width:100%;background:linear-gradient(#80bd5f,#458042);transition:width .15s}#hptext{position:absolute;inset:0;font-size:11px;line-height:16px;text-align:center;color:var(--text);text-shadow:0 0 3px var(--bg)}#inv{display:flex;flex-wrap:wrap;justify-content:center;max-width:92vw;gap:12px;font-size:11px;background:var(--panel);padding:8px 12px;border:2px solid var(--edge)}#inv span{display:inline-flex;align-items:center;gap:4px;min-height:24px}@media (pointer: coarse){#inv span{min-height:48px;min-width:48px;justify-content:center}#inv{gap:12px}}#inv b{color:var(--accent)}#inv[hidden]{display:none}#inv span.bump{animation:bump .3s}#buffs{display:flex;gap:8px;font-size:10px}#buffs span{background:var(--panel);border:2px solid var(--accent);padding:4px 6px}@keyframes bump{50%{transform:scale(1.3)}}#bodies{flex-direction:column;align-items:stretch;width:100%;gap:6px}#bodies button.mode{width:100%}#bodies .part{display:flex;align-items:center;gap:8px;font-size:11px}#bodies .row{display:flex;gap:6px}#bodies .row button{flex:1}#bodies .part span{flex:1;color:var(--muted)}#bodies .part b{min-width:28px;text-align:center;color:var(--accent)}#bodies .part button{min-width:44px;padding:8px}#mysprite{display:flex;flex-direction:column;gap:6px;width:100%}#mysprite .row{display:flex;gap:6px}#mysprite .row button{flex:1}#mysprite .use{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px}#mysprite .google{display:flex;justify-content:center;min-height:0}#mysprite .note{font-size:10px;color:var(--muted);margin:0;text-align:center;min-height:1em}#side{position:fixed;right:calc(10px + env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px}#side button{width:52px;height:52px;font-size:24px;line-height:1;cursor:pointer;padding:0;background:var(--panel);border:2px solid var(--edge-hi);border-bottom-width:4px;color:var(--text)}#side button:hover{border-color:var(--accent)}#side button:active{border-bottom-width:2px;transform:translateY(2px)}#side button[hidden]{display:none}#side button.on{border-color:var(--accent)}#hud,#hint,#chat-log div,#chat-input,#preview,#join input,#join button,#bodies button,#classes button,#hpbar,#hungerbar,#inv,#buffs span,#side button,#bag button,#bag-grid .cell,#bag-grid .item i,#bag .recipe,#cauldron,#book .page{--tl: var(--chip, 2px);--tr: var(--chip, 2px);--br: var(--chip, 2px);--bl: var(--chip, 2px);clip-path:polygon(var(--tl) 0,calc(100% - var(--tr)) 0,calc(100% - var(--tr)) var(--tr),100% var(--tr),100% calc(100% - var(--br)),calc(100% - var(--br)) calc(100% - var(--br)),calc(100% - var(--br)) 100%,var(--bl) 100%,var(--bl) calc(100% - var(--bl)),0 calc(100% - var(--bl)),0 var(--tl),var(--tl) var(--tl))}#chat-log div{--chip: 3px}#bag-grid .item i.r{--tr: 0px;--br: 0px}#bag-grid .item i.b{--bl: 0px;--br: 0px}#bag-grid .item i.l{--tl: 0px;--bl: 0px}#bag-grid .item i.t{--tl: 0px;--tr: 0px}#join .panel,#bag .panel{border:6px solid transparent;background:none;box-shadow:none;border-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' shape-rendering='crispEdges'%3E%3Cpath fill='%23f4f4ee' fill-rule='evenodd' d='M3 0h12v3h3v12h-3v3H3v-3H0V3h3zM6 3h6v3h3v6h-3v3H6v-3H3V6h3z'/%3E%3Cpath fill='%2336334b' fill-opacity='.92' d='M6 3h6v3h3v6h-3v3H6v-3H3V6h3z'/%3E%3C/svg%3E") 6 fill / 6px stretch}#bag{position:fixed;inset:0;display:grid;place-items:center;background:#1a1a1a8c}#bag.hidden{display:none}#bag .panel{--cell: 36px;--gap: 3px;padding:14px;display:flex;flex-direction:column;gap:12px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);overflow:auto}#bag header{display:flex;align-items:center;justify-content:space-between}#bag h2{margin:0;font-size:13px;color:var(--accent)}#bag h3{margin:4px 0 0;font-size:10px;color:var(--accent)}#bag button{font:inherit;font-size:10px;cursor:pointer;color:var(--text);background:var(--well);border:2px solid var(--edge);padding:6px 8px}#bag button:hover:not(:disabled){border-color:var(--accent)}#bag button:disabled{opacity:.45;cursor:default}#bag-close{width:32px;height:32px}#bag .bag-body{display:flex;gap:16px;align-items:flex-start}#bag .bag-main{display:flex;flex-direction:column;gap:8px}#bag-grid{position:relative;display:grid;grid-template-columns:repeat(10,var(--cell));grid-auto-rows:var(--cell);gap:var(--gap);touch-action:none}#bag-grid .cell{background:var(--well);border:2px solid rgba(171,164,166,.35)}#bag-grid .item{position:absolute;left:calc(var(--x) * (var(--cell) + var(--gap)));top:calc(var(--y) * (var(--cell) + var(--gap)));width:calc(var(--w) * (var(--cell) + var(--gap)) - var(--gap));height:calc(var(--h) * (var(--cell) + var(--gap)) - var(--gap));display:grid;place-items:center;cursor:grab;touch-action:none}#bag-grid .item i{position:absolute;left:calc(var(--dx) * (var(--cell) + var(--gap)));top:calc(var(--dy) * (var(--cell) + var(--gap)));width:var(--cell);height:var(--cell);background:#5c4a3f;border:2px solid var(--edge)}#bag-grid .item .ico{position:relative;font-size:22px;pointer-events:none}#bag-grid .item i.r{width:calc(var(--cell) + var(--gap));border-right:0}#bag-grid .item i.b{height:calc(var(--cell) + var(--gap));border-bottom:0}#bag-grid .item i.l{border-left:0}#bag-grid .item i.t{border-top:0}#bag-grid .item[data-size="2"] .ico{font-size:30px}#bag-grid .item[data-size="3"] .ico{font-size:38px}#bag-grid .item b{position:absolute;right:3px;bottom:2px;font-size:9px;color:var(--text);text-shadow:0 0 2px var(--bg),0 0 2px var(--bg);pointer-events:none}#bag-grid .item.sel i{border-color:var(--accent)}#bag-grid .item.dragging{z-index:2;cursor:grabbing;opacity:.85}#bag-grid .item.dragging i{border-color:var(--go);background:#80bd5f59}#bag-grid .item.dragging.bad i{border-color:var(--error);background:#dd956359}#bag-actions{display:flex;align-items:center;gap:6px;min-height:40px}#bag-sel{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:10px;line-height:1.4}#bag-sel small,#bag small{display:block;width:100%;font-size:8px;color:var(--muted);line-height:1.5}#bag-actions button{min-width:40px;min-height:36px}#bag-rot,#bag-drop{font-size:16px!important;font-family:system-ui,sans-serif!important}#bag-drop.over{border-color:var(--error);background:#dd956359}#bag .bag-side{width:250px;display:flex;flex-direction:column;gap:8px}#bag .tabs{display:flex;gap:6px}#bag .tabs button{flex:1}#bag .tabs button.on{border-color:var(--accent);color:var(--accent)}#craft-list,#mix-pane{display:flex;flex-direction:column;gap:8px}#craft-list[hidden],#mix-pane[hidden]{display:none}#bag .recipe{display:grid;grid-template-columns:1fr auto;gap:6px;padding:8px;background:var(--well);border:2px solid var(--edge)}#bag .recipe .out{grid-column:1 / -1;display:flex;gap:8px;align-items:center;font-size:10px}#bag .recipe .out .ico{font-size:22px}#bag .recipe .ins{display:flex;gap:8px;align-items:center;font-size:10px}#bag .recipe .need{color:var(--error)}#bag .recipe .have{color:var(--go)}#cauldron{display:flex;gap:8px;justify-content:center;padding:10px;background:#2a2433;border:2px solid var(--edge)}#cauldron .pot-slot{width:48px;height:48px;font-size:24px;padding:0;border-style:dashed}#mix-ings{display:flex;flex-wrap:wrap;gap:6px}#mix-ings .ing{position:relative;width:44px;height:44px;font-size:20px;padding:0}#mix-ings .ing b{position:absolute;right:2px;bottom:1px;font-size:8px}#mix-ings .ing.on{border-color:var(--accent);background:#5c4a3f}#mix-go{border-color:var(--go)!important;color:var(--go)!important}#book{display:flex;flex-direction:column;gap:6px}#book .page{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:10px;padding:6px;background:var(--well)}#bag .note{margin:0;font-size:8px;color:var(--muted);text-align:center;line-height:1.5}@media (max-width: 760px){#bag .bag-body{flex-direction:column;align-items:stretch}#bag .bag-side{width:auto}#bag .panel{--cell: min(28px, calc((100vw - 70px)*.1 - 3px) )}#bag-grid .item .ico{font-size:15px!important}#bag-grid .item[data-size="2"] .ico{font-size:22px!important}#bag-grid .item[data-size="3"] .ico{font-size:28px!important}}#player-card{position:fixed;z-index:5;display:flex;flex-direction:column;gap:8px;padding:10px;min-width:160px;background:var(--panel);border:2px solid var(--edge-hi);font-size:10px}#player-card[hidden]{display:none}#player-card header{display:flex;align-items:center;justify-content:space-between;gap:10px}#player-card b{color:var(--accent);font-size:11px}#player-card button{font:inherit;cursor:pointer;color:var(--text);background:var(--well);border:2px solid var(--edge);padding:8px}#player-card button:hover{border-color:var(--accent)}#card-close{padding:2px 6px!important}#card-visit[hidden]{display:none}