:root{--pixel-font:"Press Start 2P", "Courier New", monospace;--mono-font:"Courier New", Courier, monospace;--ink:#0f0e1a;--panel-bg:#1a1a2ef2;--accent:#6c5ce7;--accent-active:#00b894;--hunger:#ffb347;--energy:#58c4ff;--affection:#ff6b9d}html,body{height:100%;font-family:var(--mono-font);background:#1a1a2e;margin:0;padding:0;overflow:auto}#game-wrap{justify-content:center;align-items:center;width:max-content;min-width:100%;height:max-content;min-height:100%;margin:0 auto;display:flex;position:relative}canvas{border:4px solid var(--ink);image-rendering:pixelated;background:#2e2a45}#ui-overlay{pointer-events:none;z-index:10;justify-content:flex-end;align-items:flex-start;padding:14px 18px;display:flex;position:fixed;top:0;left:0;right:0}.stat-row{align-items:center;gap:6px;display:flex}.stat-label{width:48px;font-family:var(--pixel-font);color:#eee;letter-spacing:.5px;font-size:7px}.bar-bg{border:1px solid var(--ink);width:84px;height:10px;image-rendering:pixelated;background:#111}.bar-fill{height:100%}.bar-fill.hunger{background:var(--hunger)}.bar-fill.energy{background:var(--energy)}.bar-fill.affection{background:var(--affection)}#controls-panel{pointer-events:all;flex-direction:column;align-items:stretch;gap:8px;display:flex}button{font-family:var(--pixel-font);cursor:pointer}#edit-btn,#edit-menu-btn,.edit-tool-tab{background:var(--accent);color:#fff;border:2px solid var(--ink);padding:12px 16px;font-size:11px;box-shadow:3px 3px #00000080}#edit-btn:active,#edit-menu-btn:active,.edit-tool-tab:active{transform:translate(2px,2px);box-shadow:1px 1px #00000080}#edit-btn.active{background:var(--accent-active)}#edit-menu-btn.hidden,.edit-tool-tab.hidden{display:none}.edit-tool-tab.open{background:var(--accent-active);box-shadow:none}#edit-menu{background:var(--panel-bg);border:2px solid var(--ink);z-index:20;pointer-events:all;flex-direction:column;gap:8px;width:min(92%,540px);max-height:320px;padding:10px;display:flex;position:fixed;bottom:64px;left:50%;transform:translate(-50%);box-shadow:4px 4px #00000080}#edit-menu.hidden,#edit-menu.standalone #edit-menu-tabs{display:none}#appearance-menu{background:var(--panel-bg);border:2px solid var(--ink);z-index:30;flex-direction:column;gap:8px;width:min(92%,540px);max-height:340px;padding:10px;display:flex;position:fixed;bottom:64px;left:50%;transform:translate(-50%);box-shadow:4px 4px #00000080}#appearance-menu.hidden{display:none}#appearance-menu-header{color:#eee;font-family:var(--pixel-font);justify-content:space-between;align-items:center;font-size:8px;display:flex}#close-appearance-menu{color:#fff;border:2px solid var(--ink);background:#d64545;padding:4px 8px;font-size:10px;box-shadow:2px 2px #00000080}#edit-menu-header{color:#eee;font-family:var(--pixel-font);justify-content:space-between;align-items:center;font-size:8px;line-height:1.4;display:flex}#close-edit-menu{color:#fff;border:2px solid var(--ink);background:#d64545;padding:4px 8px;font-size:10px;box-shadow:2px 2px #00000080}#close-edit-menu:active{box-shadow:none;transform:translate(2px,2px)}#edit-menu-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;display:grid}.picker-tab{background:var(--accent);color:#fff;border:2px solid var(--ink);min-width:0;padding:10px 6px;font-size:9px;box-shadow:2px 2px #00000080}.picker-tab:active{transform:translate(2px,2px);box-shadow:1px 1px #00000080}.picker-tab.open{background:var(--accent-active);color:#fff;box-shadow:none;cursor:default}@media (width<=480px){#edit-menu-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}.swatch-grid{border:1px solid var(--ink);background:repeating-conic-gradient(#22213a 0% 25%,#262540 0% 50%) 0 0/16px 16px;flex-wrap:wrap;align-content:flex-start;gap:4px;max-height:240px;padding:8px;display:flex;overflow-y:auto}.swatch-grid.hidden{display:none}.swatch-grid::-webkit-scrollbar{width:14px}.swatch-grid::-webkit-scrollbar-track{background:var(--ink);border-left:2px solid var(--ink)}.swatch-grid::-webkit-scrollbar-thumb{background:var(--accent);border:2px solid var(--ink)}.swatch-grid::-webkit-scrollbar-thumb:hover{background:var(--accent-active)}.swatch-grid{scrollbar-width:auto;scrollbar-color:var(--accent) var(--ink)}.swatch{border:2px solid var(--ink);cursor:pointer;image-rendering:pixelated;background-color:#2a2a3a;flex-shrink:0;padding:0}.swatch:hover{border-color:#fff}.swatch.selected{border-color:var(--accent-active)}#expand-panel.hidden,#eraser-panel.hidden{display:none}#character-panel{border:1px solid var(--ink);background:repeating-conic-gradient(#22213a 0% 25%,#262540 0% 50%) 0 0/16px 16px;grid-template-columns:82px 1fr;gap:10px;max-height:240px;padding:8px;display:grid;overflow-y:auto}#character-panel.hidden{display:none}#character-preview{box-sizing:border-box;border:2px solid var(--ink);background:#18172b;justify-content:center;align-self:start;align-items:flex-start;height:116px;padding:8px 0;display:flex;overflow:hidden}#character-preview-canvas{width:48px;height:96px;image-rendering:pixelated;background:0 0;border:0}#character-builder,#character-options{flex-direction:column;gap:8px;min-width:0;display:flex}#character-name{box-sizing:border-box;color:#fff;border:2px solid var(--ink);width:100%;font-family:var(--pixel-font);background:#18172b;padding:8px;font-size:8px}.character-option-row{flex-direction:column;gap:4px;display:flex}.character-option-label{color:#ddd;border:0;border-bottom:2px solid var(--ink);width:100%;font-family:var(--pixel-font);text-align:left;background:#262440;padding:7px 6px;font-size:7px}.character-option-label:hover{color:#fff;background:#343157}.character-option-row.collapsed .character-choice-list,.character-option-row.interaction-hidden{display:none}.character-choice-list{gap:4px;padding:2px 2px 5px;display:flex;overflow-x:auto}.character-choice,#add-character-btn{color:#fff;border:2px solid var(--ink);background:#393657;padding:7px 8px;font-size:7px;box-shadow:2px 2px #00000080}.character-choice{justify-content:center;align-items:center;width:48px;min-width:48px;height:72px;padding:4px;display:flex;position:relative;overflow:hidden}.character-choice img{object-fit:contain;width:32px;height:64px;image-rendering:pixelated;position:absolute;inset:4px auto auto 50%;transform:translate(-50%)}.character-choice .character-dummy-body{z-index:0}.character-choice .character-asset-thumbnail{z-index:1}.character-empty-thumbnail{z-index:2;color:#eee;font-family:var(--pixel-font);text-shadow:2px 2px 0 var(--ink);font-size:20px;line-height:1;position:relative}.character-choice.selected{background:var(--accent-active)}#add-character-btn{background:var(--accent);grid-column:1/-1;padding:10px;font-size:9px}#character-panel.editing-appearance #add-character-btn,#appearance-menu #character-name{display:none}#character-panel,.character-choice-list{scrollbar-width:auto;scrollbar-color:var(--accent) var(--ink)}#character-panel::-webkit-scrollbar{width:14px}.character-choice-list::-webkit-scrollbar{height:12px}#character-panel::-webkit-scrollbar-track{background:var(--ink);border:2px solid #24213d}.character-choice-list::-webkit-scrollbar-track{background:var(--ink);border:2px solid #24213d}#character-panel::-webkit-scrollbar-thumb{background:var(--accent);border:2px solid var(--ink)}.character-choice-list::-webkit-scrollbar-thumb{background:var(--accent);border:2px solid var(--ink)}#character-panel::-webkit-scrollbar-thumb:hover{background:var(--accent-active)}.character-choice-list::-webkit-scrollbar-thumb:hover{background:var(--accent-active)}@media (width<=480px){#character-panel{grid-template-columns:64px 1fr}}#msg-box{background:var(--panel-bg);color:#fff;border:2px solid var(--ink);font-family:var(--pixel-font);opacity:0;pointer-events:none;z-index:10;padding:10px 16px;font-size:9px;transition:opacity .2s;position:fixed;bottom:18px;left:50%;transform:translate(-50%);box-shadow:3px 3px #00000080}#msg-box.show{opacity:1}#player-badge{background:var(--panel-bg);border:2px solid var(--ink);opacity:0;pointer-events:none;z-index:10;flex-direction:column;gap:6px;padding:8px 10px;transition:opacity .15s,transform .15s;display:flex;position:fixed;bottom:18px;left:18px;transform:translateY(6px);box-shadow:3px 3px #00000080}#player-badge.show{opacity:1;transform:translateY(0)}#badge-name{font-family:var(--pixel-font);color:#fff;letter-spacing:.5px;text-align:center;font-size:9px}#badge-row{align-items:center;gap:10px;display:flex}#badge-portrait{border:2px solid var(--ink);image-rendering:pixelated;background-color:#2a2a3a;flex-shrink:0}#badge-stats{flex-direction:column;gap:5px;display:flex}