html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        overflow: hidden;
        background: #07131d;
        color: #f8f5df;
        font-family: "Courier New", monospace;
        image-rendering: pixelated;
      }

      canvas {
        display: block;
        width: 100vw;
        height: 100vh;
        image-rendering: pixelated;
        outline: none;
        cursor: crosshair;
      }

      :root {
        --slot-size: 78px;
      }

      @keyframes panelGlow {
        0%, 100% { box-shadow: 0 0 0 4px #1a0b05, 0 0 0 9px #3f2418, 0 0 0 13px #1f0f08, inset 0 0 0 3px rgba(255,230,180,.22), inset 0 0 0 7px rgba(42,20,12,.28); }
        50% { box-shadow: 0 0 0 4px #1a0b05, 0 0 0 9px #4b2b1c, 0 0 0 13px #2a140c, inset 0 0 0 3px rgba(255,230,180,.3), inset 0 0 0 7px rgba(42,20,12,.34); }
      }

      .panel {
        background:
          linear-gradient(#2a140c, #2a140c) 0 0 / 100% 6px no-repeat,
          linear-gradient(#2a140c, #2a140c) 0 100% / 100% 6px no-repeat,
          linear-gradient(#2a140c, #2a140c) 0 0 / 6px 100% no-repeat,
          linear-gradient(#2a140c, #2a140c) 100% 0 / 6px 100% no-repeat,
          linear-gradient(90deg, rgba(42,20,12,.18), rgba(255,226,174,.08), rgba(42,20,12,.16)),
          linear-gradient(90deg, rgba(79,45,28,.18) 0 8px, transparent 8px 16px) 0 100% / 16px 4px repeat-x,
          linear-gradient(rgba(255,226,174,.16) 50%, transparent 50%) 0 0 / 100% 4px,
          #b9824f;
        animation: panelGlow 3.6s ease-in-out infinite;
        padding: 16px;
        clip-path: polygon(0 8px,8px 8px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 8px),0 calc(100% - 8px));
      }

      .hud {
        position: fixed;
        left: 12px;
        top: 12px;
        display: grid;
        gap: 8px;
        pointer-events: none;
        width: 210px;
        max-width: calc(100vw - 230px);
        color: #2a140c;
        text-shadow: 1px 1px rgba(255,226,174,.45);
      }
      .hud .panel { padding: 12px; }

      .editor, .sign-options, .place-prompt, .inventory-slot, .inventory-window, .equipment-window, .item-window, .modal, .confirm-panel { pointer-events: auto; }
      .editor h2, .sign-options h2, .inventory-window h2, .equipment-window h2, .item-window h2, .modal h2, .confirm-panel h2 { margin: 0 0 8px; color: #fff0a8; font-size: 15px; text-shadow: 2px 2px #2a140c; }
      .name-row { display: flex; align-items: center; gap: 8px; }
      .name-row strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
      .name-edit {
        width: 24px;
        min-height: 24px;
        padding: 0;
        font-size: 12px;
        pointer-events: auto;
      }
      .name-form { display: flex; gap: 6px; margin-bottom: 7px; pointer-events: auto; }
      .name-form input { min-height: 28px; font-size: 12px; }
      .name-form button { min-height: 28px; padding: 0 7px; font-size: 12px; }
      .auth-row, .auth-login, .auth-buttons {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 8px;
        pointer-events: auto;
        font-size: 12px;
      }
      .auth-login {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
        font-weight: 700;
      }
      .auth-row span { flex: 1; font-weight: 700; }
      .auth-row.muted { opacity: .72; }
      .auth-row button, .auth-buttons button {
        min-height: 28px;
        padding: 0 7px;
        font-size: 12px;
      }
      .auth-buttons {
        display: flex;
        margin-top: 0;
      }
      .auth-provider {
        width: 34px;
        min-height: 34px;
        padding: 0;
        display: grid;
        place-items: center;
        font-size: 18px;
        line-height: 1;
      }
      .auth-provider.google { background: #fff; color: #4285f4; }
      .auth-provider.discord { background: #5865f2; color: #fff; }
      .status-vitals { display: grid; gap: 4px; margin-top: 7px; }
      .status-vital { height: 8px; background: rgba(42,20,12,.45); box-shadow: inset 0 0 0 1px rgba(42,20,12,.55); }
      .status-vital span { display: block; height: 100%; box-shadow: inset 0 -2px rgba(42,20,12,.18); }
      .status-vital.health span { background: #d63b3b; }
      .status-vital.hunger span { background: #ffd55a; }

      button, input {
        min-height: 34px;
        border: 0;
        border-radius: 0;
        background: #f0bd6a;
        color: #2a140c;
        font: 700 14px "Courier New", monospace;
        box-shadow: 0 0 0 2px #05090d, 0 3px 0 #05090d, inset 0 -5px 0 rgba(164,86,28,.18), inset 0 4px 0 rgba(255,255,255,.28);
      }

      input { box-sizing: border-box; width: 100%; padding: 0 8px; }
      input[type="file"] { display: none; }
      button { cursor: pointer; padding: 0 10px; }
      button:hover { transform: translateY(-1px); }
      button:active { transform: translateY(2px); box-shadow: 0 0 0 2px #05090d, 0 1px 0 #05090d, inset 0 -4px 0 rgba(164,86,28,.2); }
      button.active { background: #ffd55a; }
      .pay-button { background: #5ac85a; color: #08230e; }
      .pay-button:hover { background: #73e36e; }

      .editor {
        position: fixed;
        left: 50%;
        top: 50%;
        z-index: 7;
        width: min(390px, calc(100vw - 24px));
        max-height: calc(100vh - 24px);
        overflow-y: auto;
        box-sizing: border-box;
        display: none;
        transform: translateY(8px) scale(.94);
        transform-origin: left top;
        opacity: 0;
      }
      .editor.visible {
        display: block;
        animation: editorPop .18s steps(4, end) forwards;
      }

      .tiers, .palette, .row { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
      .tiers button { flex: 1; min-width: 96px; }
      .hint { color: #3f2418; font-size: 12px; line-height: 1.35; margin: 8px 0 0; }

      .sign-options {
        position: fixed;
        z-index: 8;
        display: none;
        width: 236px;
        opacity: 0;
        transform: translate(-50%, 8px) scale(.94);
        transform-origin: top center;
      }
      .sign-options.visible {
        display: block;
        animation: signMenuPop .2s steps(4, end) forwards;
      }
      .place-prompt {
        display: block;
        opacity: 1;
        transform: none;
      }
      .place-prompt button {
        width: 100%;
        min-height: 44px;
      }
      .inventory-slot button {
        width: 100%;
        min-height: 40px;
      }
      .inventory-window {
        position: fixed;
        left: 50%;
        top: 50%;
        z-index: 9;
        width: min(460px, calc(100vw - 520px));
        min-height: 640px;
        display: none;
        transform: translate(-50%, -50%) scale(.95);
        opacity: 0;
      }
      .inventory-window.visible {
        display: block;
        animation: confirmPop .16s steps(4, end) forwards;
      }
      .equipment-window {
        position: fixed;
        left: calc(50% - 420px);
        top: 50%;
        z-index: 9;
        width: 300px;
        display: none;
        transform: translate(-50%, -50%) scale(.95);
        opacity: 0;
      }
      .equipment-window.visible {
        display: block;
        animation: confirmPop .16s steps(4, end) forwards;
      }
      .item-window {
        position: fixed;
        left: calc(50% + 420px);
        top: 50%;
        z-index: 9;
        width: 286px;
        display: none;
        transform: translate(-50%, -50%) scale(.95);
        opacity: 0;
      }
      .item-window.visible {
        display: block;
        animation: confirmPop .16s steps(4, end) forwards;
      }
      .paperdoll {
        height: 150px;
        margin: 8px 0 10px;
        display: grid;
        place-items: center;
        background: rgba(255,226,174,.16);
        box-shadow: inset 0 0 0 2px rgba(42,20,12,.45);
      }
      .vital-bars { display: grid; gap: 5px; margin-bottom: 8px; }
      .vital { padding: 5px; background: rgba(64,36,24,.22); box-shadow: inset 0 0 0 2px rgba(42,20,12,.35); }
      .vital-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; color: #3f2418; font-size: 11px; font-weight: 800; }
      .vital-label strong { color: #fff0a8; text-shadow: 1px 1px #2a140c; }
      .vital-track { height: 9px; background: rgba(42,20,12,.45); box-shadow: inset 0 0 0 1px rgba(42,20,12,.55); }
      .vital-track i { display: block; height: 100%; background: #5ac85a; box-shadow: inset 0 -2px rgba(42,20,12,.18); }
      .vital.health .vital-track i { background: #d63b3b; }
      .vital.hunger .vital-track i { background: #ffd55a; }
      .food-slot-grid { display: grid; grid-template-columns: repeat(3, var(--slot-size)); justify-content: center; gap: 6px; margin-bottom: 8px; }
      .food-slot { background: rgba(64,36,24,.24); }
      .food-slot span, .food-slot em { font-size: 11px; font-style: normal; opacity: .7; }
      .food-slot small { font-size: 11px; color: #3f2418; font-weight: 800; }
      #gearPreview { width: 88px; height: 132px; image-rendering: pixelated; }
      .paperdoll-player { position: relative; width: 66px; height: 108px; image-rendering: pixelated; }
      .doll { position: absolute; display: block; }
      .doll.backpack { left: 18px; top: 37px; width: 30px; height: 34px; background: #5a3622; opacity: 0; }
      .doll.backpack.on { opacity: 1; box-shadow: inset 6px 5px #8b5a2b; }
      .doll.legs { left: 20px; top: 68px; width: 9px; height: 28px; background: #263646; box-shadow: 17px 0 #263646; }
      .doll.legs.on { background: #5a3622; box-shadow: 17px 0 #5a3622; }
      .doll.boots { left: 17px; top: 92px; width: 13px; height: 7px; background: transparent; box-shadow: 18px 0 transparent; }
      .doll.boots.on { background: #2a140c; box-shadow: 18px 0 #2a140c; }
      .doll.body { left: 18px; top: 41px; width: 30px; height: 28px; background: #5ac85a; }
      .doll.body.on { background: #d8aa68; box-shadow: inset 0 -7px #8b5a2b; }
      .doll.arms { left: 11px; top: 43px; width: 7px; height: 28px; background: #5ac85a; box-shadow: 31px 0 #5ac85a; }
      .doll.gloves { left: 9px; top: 66px; width: 10px; height: 7px; background: transparent; box-shadow: 31px 0 transparent; }
      .doll.gloves.on { background: #3f2418; box-shadow: 31px 0 #3f2418; }
      .doll.head { left: 22px; top: 20px; width: 22px; height: 22px; background: #ffd7a8; box-shadow: inset 5px 7px #111, inset -5px 7px #111; }
      .doll.cap { left: 19px; top: 12px; width: 28px; height: 10px; background: transparent; }
      .doll.cap.on { background: #316b33; box-shadow: inset 8px -4px #3f8f42; }
      .equipment-grid {
        display: grid;
        grid-template-columns: repeat(3, var(--slot-size));
        justify-content: center;
        gap: 7px;
      }
      .equipment-slot, .quick-tool-slot, .food-slot, .inventory-slot-cell, .furnace-slot, .furnace-output, .box-slot, .trash-slot {
        width: var(--slot-size);
        height: var(--slot-size);
        min-height: var(--slot-size);
        box-sizing: border-box;
        padding: 4px 2px;
        display: grid;
        place-items: center;
        gap: 2px;
        font-size: 11px;
        background: rgba(64,36,24,.28);
        box-shadow: inset 0 0 0 2px rgba(42,20,12,.46), 0 2px 0 rgba(42,20,12,.45);
        color: #fff0a8;
        overflow: hidden;
      }
      .equipment-slot span { color: #3f2418; font-size: 11px; }
      .equipment-slot strong, .quick-tool-slot strong { color: #fff0a8; font-size: 11px; text-shadow: 2px 2px #2a140c; }
      .equipment-slot em, .quick-tool-slot em, .food-slot em, .slot-empty-label, .furnace-slot.empty span, .furnace-output.empty span, .box-slot.empty span, .trash-slot.empty span {
        font-style: normal;
        opacity: .55;
        font-size: 10px;
        color: #3f2418;
        text-shadow: none;
      }
      .gear-section-title, .quick-title { margin: 10px 0 5px; color: #3f2418; font-size: 12px; font-weight: 800; letter-spacing: 0; }
      .gear-section-title:first-of-type { margin-top: 0; }
      .quick-tool-grid { display: grid; grid-template-columns: repeat(3, var(--slot-size)); justify-content: center; gap: 7px; }
      .quick-tool-slot { background: rgba(64,36,24,.24); }
      .quick-tool-slot.active { background: rgba(127,255,208,.36); }
      .quick-tool-slot.assigning { box-shadow: inset 0 0 0 2px #7fffd0, 0 0 0 2px #2a140c; }
      .quick-tool-slot span { color: #3f2418; font-size: 11px; }
      .inventory-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin: 4px 0 12px;
      }
      .inventory-filters {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 5px;
        margin: 0 0 10px;
      }
      .inventory-filters button {
        min-height: 28px;
        padding: 4px 3px;
        font-size: 12px;
      }
      .inventory-filters button.active {
        background: #7fffd0;
        color: #2a140c;
      }
      .inventory-content {
        min-height: 488px;
        display: grid;
        align-content: start;
      }
      .slot-grid {
        display: grid;
        grid-template-columns: repeat(5, var(--slot-size));
        justify-content: center;
        gap: 8px;
      }
      .backpack-grid { margin-top: 6px; }
      .inventory-section-title {
        margin: 8px 0 5px;
        color: #3f2418;
        font-size: 12px;
        font-weight: 700;
      }
      .inventory-slot-cell {
        aspect-ratio: 1;
        min-width: 0;
        color: #2a140c;
      }
      .inventory-item-button {
        position: relative;
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: 3px 2px;
        display: grid;
        place-items: center;
        gap: 3px;
        background: transparent;
        box-shadow: none;
      }
      .inventory-item-button:disabled {
        cursor: default;
        opacity: 1;
      }
      .inventory-item-button:not(:disabled):hover {
        background: rgba(255, 240, 168, .18);
      }
      .inventory-slot-cell.filled { background: rgba(255,226,174,.22); }
      .inventory-slot-cell:hover { box-shadow: inset 0 0 0 2px rgba(127,255,208,.65), 0 2px 0 rgba(42,20,12,.55); }
      .inventory-slot-cell strong { font-size: 15px; color: #fff0a8; text-shadow: 2px 2px #2a140c; }
      .inventory-slot-cell span { font-size: 11px; font-weight: 700; }
      .recipe-list {
        display: grid;
        gap: 8px;
        min-height: 454px;
        max-height: 454px;
        overflow-y: auto;
        padding-right: 2px;
      }
      .recipe-card {
        display: grid;
        grid-template-columns: 34px 1fr 86px;
        gap: 8px;
        align-items: center;
        min-height: 54px;
        padding: 8px;
        color: #2a140c;
        background: rgba(255,226,174,.2);
        box-shadow: inset 0 0 0 2px rgba(42,20,12,.45);
      }
      .recipe-card strong { display: block; color: #fff0a8; text-shadow: 2px 2px #2a140c; }
      .recipe-card span { display: block; font-size: 11px; line-height: 1.25; }
      .recipe-card span span { display: inline; }
      .recipe-card .missing-cost { color: #d63b3b; text-shadow: none; }
      .recipe-card button.disabled { opacity: .55; cursor: default; }
      .craft-owned {
        display: inline-grid !important;
        place-items: center;
        min-width: 18px;
        height: 16px;
        margin-left: 5px;
        padding: 0 4px;
        color: #2a140c;
        background: #fff0a8;
        box-shadow: inset 0 0 0 1px rgba(42,20,12,.45);
        text-shadow: none;
      }
      .furnace-slots { display: grid; grid-template-columns: repeat(3, var(--slot-size)); justify-content: center; gap: 7px; margin: 10px 0; }
      .furnace-slots.one { grid-template-columns: 1fr; }
      .furnace-slots.output { grid-template-columns: repeat(2, var(--slot-size)); }
      .furnace-slots.repairbench-inputs { grid-template-columns: repeat(2, var(--slot-size)); justify-content: center; }
      .furnace-section-title { margin: 8px 0 4px; color: #3f2418; font-size: 11px; font-weight: 700; }
      .furnace-output.empty { opacity: .55; }
      .furnace-slot.empty { opacity: .6; }
      .box-slot-grid { display: grid; grid-template-columns: repeat(3, var(--slot-size)); justify-content: center; gap: 7px; margin: 10px 0; }
      .box-slot.empty { opacity: .6; }
      .trash-slot-grid { display: grid; grid-template-columns: repeat(3, var(--slot-size)); justify-content: center; gap: 7px; margin: 10px 0; }
      .trash-slot.empty { opacity: .58; }
      .danger-button { background: #c84a2f; color: #fff0a8; }
      .repairbench-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 12px; }
      .repairbench-stat { min-height: 52px; padding: 7px 8px; background: rgba(255,226,174,.22); box-shadow: inset 0 0 0 2px rgba(42,20,12,.42), 0 2px 0 rgba(42,20,12,.3); display: grid; align-content: center; gap: 4px; color: #2a140c; }
      .repairbench-stat.wide { grid-column: 1 / -1; }
      .repairbench-stat span { font-size: 11px; line-height: 1.15; text-transform: uppercase; color: #5a3622; }
      .repairbench-stat strong { color: #fff0a8; font-size: 12px; line-height: 1.25; text-shadow: 2px 2px #2a140c; overflow-wrap: anywhere; }
      .furnace-actions { display: flex; justify-content: center; gap: 7px; margin-top: 8px; }
      .furnace-actions .pay-button { min-width: 112px; }
      .furnace-fire { min-height: 34px; display: grid; place-items: center; color: #2a140c; font-weight: 700; }
      .furnace-fire.on { color: #fff0a8; text-shadow: 2px 2px #8b2f16; animation: firePulse .45s steps(2, end) infinite; }
      .furnace-flame { width: 22px; height: 22px; display: none; position: relative; margin-bottom: 3px; }
      .furnace-fire.on .furnace-flame { display: block; }
      .furnace-flame::before { content:""; position:absolute; left:5px; top:5px; width:12px; height:14px; background:#ff9f1c; box-shadow: 0 -5px #d63b3b, 4px 3px #ffd55a, -4px 5px #d63b3b; }
      .furnace-flame::after { content:""; position:absolute; left:9px; top:9px; width:5px; height:8px; background:#fff0a8; }
      @keyframes firePulse { 50% { transform: translateY(-1px); color: #ffd55a; } }
      .item-icon { width: 28px; height: 24px; position: relative; }
      .item-icon.wood::before { content:""; position:absolute; left:3px; top:9px; width:22px; height:7px; background:#8b5a2b; box-shadow: inset 3px 0 #f0bd6a, inset -3px 0 #5a3622; }
      .item-icon.stone::before { content:""; position:absolute; left:4px; top:8px; width:20px; height:12px; background:#747978; box-shadow: inset 4px -3px #3f4547, inset -4px 3px #a7aeaa; }
      .item-icon.coal::before { content:""; position:absolute; left:5px; top:8px; width:19px; height:13px; background:#2d3336; box-shadow: inset 4px -3px #121619, inset -4px 3px #60696b; }
      .item-icon.sulfur::before { content:""; position:absolute; left:5px; top:7px; width:19px; height:14px; background:#d6c53a; box-shadow: inset 4px -3px #8f7d18, inset -4px 3px #fff06a; }
      .item-icon.purifiedSulfur::before { content:""; position:absolute; left:7px; top:6px; width:15px; height:16px; background:#fff06a; box-shadow: inset 3px -3px #c9a42c, inset -3px 3px #fff8a8; }
      .item-icon.explosivePowder::before { content:""; position:absolute; left:5px; top:11px; width:18px; height:10px; background:#303636; box-shadow: inset 4px -2px #121619, inset -4px 2px #60696b, 3px -5px #8f7d18, 9px -7px #d6c53a; }
      .item-icon.pinecone::before { content:""; position:absolute; left:9px; top:3px; width:10px; height:18px; background:#8b5a2b; box-shadow: inset 3px 0 #d8aa68, inset -3px 0 #5a3622, -3px 5px 0 #6d4a2e, 3px 9px 0 #6d4a2e; }
      .item-icon.corn::before { content:""; position:absolute; left:10px; top:3px; width:8px; height:18px; background:#ffd55a; box-shadow: inset 2px 0 #fff0a8, inset -2px 0 #c99a42, -6px 7px 0 -2px #4c9b4b, 6px 10px 0 -2px #2f7c3e; }
      .item-icon.floor::before { content:""; position:absolute; left:3px; top:7px; width:22px; height:14px; background:#d8aa68; box-shadow: inset 0 0 0 2px #8b5a2b, inset 0 5px #f0bd6a; }
      .item-icon.wall::before { content:""; position:absolute; left:3px; top:3px; width:22px; height:19px; background:#8b5a2b; box-shadow: inset 0 -4px #5a3622, inset 10px 0 rgba(240,189,106,.4); }
      .item-icon.door::before { content:""; position:absolute; left:7px; top:2px; width:15px; height:22px; background:#5a3622; box-shadow: inset 3px 0 #8b5a2b, 10px 10px 0 -8px #f0bd6a; }
      .item-icon.fence::before { content:""; position:absolute; left:3px; top:8px; width:22px; height:4px; background:#8b5a2b; box-shadow: 0 7px #8b5a2b, 4px -7px 0 0 #5a3622, 15px -7px 0 0 #5a3622; }
      .item-icon.gate::before { content:""; position:absolute; left:4px; top:5px; width:20px; height:15px; background:#8b5a2b; box-shadow: inset 0 -4px #5a3622, inset 8px 0 rgba(240,189,106,.45), 0 4px 0 #3f2418; }
      .item-icon.furnace::before { content:""; position:absolute; left:4px; top:4px; width:20px; height:18px; background:#5d6262; box-shadow: inset 0 -5px #303636, inset 4px 3px #949b98; }
      .item-icon.furnace::after { content:""; position:absolute; left:10px; top:13px; width:8px; height:6px; background:#ff9f1c; box-shadow: 0 -3px #ffd55a; }
      .item-icon.repairBench::before { content:""; position:absolute; left:3px; top:8px; width:22px; height:9px; background:#8b5a2b; box-shadow: inset 0 3px #d8aa68, 3px 8px 0 -1px #5a3622, 14px 8px 0 -1px #5a3622; }
      .item-icon.repairBench::after { content:""; position:absolute; left:8px; top:3px; width:11px; height:4px; background:#bfc7c8; box-shadow: 8px 0 #5d6262, 13px 5px 0 -2px #2f7c3e; }
      .item-icon.box::before { content:""; position:absolute; left:4px; top:6px; width:20px; height:15px; background:#8b5a2b; box-shadow: inset 0 4px #d8aa68, inset 0 -3px #5a3622, inset 9px 0 rgba(63,36,24,.45); }
      .item-icon.box::after { content:""; position:absolute; left:4px; top:12px; width:20px; height:2px; background:#3f2418; }
      .item-icon.trash::before { content:""; position:absolute; left:6px; top:5px; width:17px; height:17px; background:#5d6262; box-shadow: inset 0 3px #9ba3a0, inset 4px 0 #303636, inset -4px 0 #303636; }
      .item-icon.trash::after { content:""; position:absolute; left:8px; top:2px; width:13px; height:4px; background:#bfc7c8; box-shadow: -2px 4px #303636, 7px 4px #303636; }
      .item-icon.waypoint::before { content:""; position:absolute; left:12px; top:7px; width:5px; height:17px; background:#8b5a2b; box-shadow: 0 -6px #2a140c; }
      .item-icon.waypoint::after { content:""; position:absolute; left:6px; top:3px; width:16px; height:10px; background:#ffd55a; box-shadow: inset 0 0 0 2px #2a140c; }
      .item-icon.blastBomb::before { content:""; position:absolute; left:7px; top:8px; width:14px; height:14px; background:#2a140c; box-shadow: inset 4px 3px #5d6262, 0 0 0 2px #121619; }
      .item-icon.blastBomb::after { content:""; position:absolute; left:14px; top:3px; width:7px; height:3px; background:#8b5a2b; box-shadow: 5px -2px #ffd55a, 8px -3px #d63b3b; }
      .item-icon.hammer::before { content:""; position:absolute; inset:0; background:url("/public/assets/hammer.png") center / contain no-repeat; image-rendering: pixelated; }
      .item-icon.axe::before { content:""; position:absolute; inset:0; background:url("/public/assets/axe.png") center / contain no-repeat; image-rendering: pixelated; }
      .item-icon.pickaxe::before { content:""; position:absolute; inset:0; background:url("/public/assets/pickaxe.png") center / contain no-repeat; image-rendering: pixelated; }
      .item-icon.spear::before { content:""; position:absolute; left:5px; top:13px; width:22px; height:3px; background:#5a3622; transform:rotate(-28deg); box-shadow: 15px 0 #bfc7c8, 18px 0 #f8d8a8; transform-origin:center; }
      .item-icon.leafCap::before { content:""; position:absolute; left:5px; top:4px; width:18px; height:10px; background:#316b33; box-shadow: inset 6px -3px #3f8f42, 5px 5px 0 -2px #397130; }
      .item-icon.workerShirt::before { content:""; position:absolute; left:5px; top:4px; width:18px; height:19px; background:#d8aa68; box-shadow: inset 0 -5px #8b5a2b, -4px 5px 0 -1px #d8aa68, 22px 5px 0 -1px #d8aa68; }
      .item-icon.workerPants::before { content:""; position:absolute; left:7px; top:4px; width:6px; height:20px; background:#5a3622; box-shadow: 9px 0 #5a3622, 4px 0 #8b5a2b; }
      .item-icon.trailBoots::before { content:""; position:absolute; left:5px; top:13px; width:8px; height:8px; background:#2a140c; box-shadow: 11px 0 #2a140c; }
      .item-icon.workGloves::before { content:""; position:absolute; left:4px; top:8px; width:9px; height:10px; background:#3f2418; box-shadow: 12px 0 #3f2418; }
      .item-icon.backpack::before { content:""; position:absolute; left:6px; top:4px; width:17px; height:20px; background:#5a3622; box-shadow: inset 5px 5px #8b5a2b, inset 0 -4px #3f2418; }
      .item-icon.fiber::before { content:""; position:absolute; left:6px; top:4px; width:4px; height:19px; background:#2f7c3e; box-shadow: 7px 3px #4c9b4b, 14px 0 #2f5b38; }
      .item-icon.ore::before { content:""; position:absolute; left:5px; top:7px; width:18px; height:14px; background:#4f5659; box-shadow: inset 5px 3px #bfc7c8, inset -4px -3px #2446a8; }
      .item-icon.tool::before { content:""; position:absolute; left:6px; top:4px; width:5px; height:22px; background:#8b5a2b; transform: rotate(35deg); box-shadow: 8px -7px 0 #bfc7c8; }
      .item-icon.food::before { content:""; position:absolute; left:7px; top:5px; width:15px; height:15px; background:#d63b3b; box-shadow: inset 5px 2px #ff8fb3; }
      .inventory-item-button::before,
      .inventory-item-button::after {
        position: absolute;
        left: 50%;
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, -8px);
        transition: opacity .12s steps(2, end), transform .12s steps(2, end);
        z-index: 20;
      }
      .inventory-item-button::before {
        content: attr(data-tooltip-title) "\A" attr(data-tooltip-body);
        white-space: pre-line;
        bottom: calc(100% + 10px);
        width: max-content;
        max-width: 190px;
        padding: 8px 9px;
        color: #fff0a8;
        background: #5a3622;
        border: 2px solid #2a140c;
        box-shadow: inset 0 0 0 2px rgba(216,170,104,.38), 3px 3px 0 rgba(42,20,12,.35);
        font-size: 12px;
        line-height: 1.25;
        text-align: center;
      }
      .inventory-item-button::after {
        content: "";
        bottom: calc(100% + 4px);
        width: 9px;
        height: 9px;
        background: #5a3622;
        border-right: 2px solid #2a140c;
        border-bottom: 2px solid #2a140c;
        transform: translate(-50%, -8px) rotate(45deg);
      }
      .inventory-item-button:hover::before,
      .inventory-item-button:focus-visible::before {
        opacity: 0;
      }
      .inventory-item-button:hover::after,
      .inventory-item-button:focus-visible::after {
        opacity: 0;
      }
      .inventory-tooltip {
        position: fixed;
        z-index: 1000;
        width: max-content;
        max-width: 210px;
        padding: 8px 9px;
        color: #fff0a8;
        background: #5a3622;
        border: 2px solid #2a140c;
        box-shadow: inset 0 0 0 2px rgba(216,170,104,.38), 3px 3px 0 rgba(42,20,12,.35);
        font-size: 12px;
        line-height: 1.25;
        text-align: center;
        pointer-events: none;
        opacity: 0;
        transform: translateY(-4px);
        transition: opacity .12s steps(2, end), transform .12s steps(2, end);
      }
      .inventory-tooltip.visible { opacity: 1; transform: translateY(0); }
      .inventory-tooltip strong { display: block; margin-bottom: 3px; color: #fff0a8; text-shadow: 2px 2px #2a140c; }
      .inventory-tooltip span { display: block; color: #f8d8a8; }
      .quantity-picker {
        position: fixed;
        z-index: 1002;
        display: none;
        padding: 6px;
        background: #5a3622;
        border: 2px solid #2a140c;
        box-shadow: inset 0 0 0 2px rgba(216,170,104,.38), 3px 3px 0 rgba(42,20,12,.35);
      }
      .quantity-picker.visible { display: block; }
      .quantity-picker input { width: 82px; min-height: 28px; font-size: 12px; }
      .sign-options .tiers {
        display: grid;
        grid-template-columns: 1fr;
      }
      .sign-options .tiers button {
        min-width: 0;
        text-align: left;
      }
      .panel-close {
        position: absolute;
        right: 8px;
        top: 8px;
        width: 26px;
        min-height: 26px;
        padding: 0;
        background: #ff8fb3;
        color: #111;
      }

      @keyframes editorPop {
        to { opacity: 1; transform: translateY(0) scale(1); }
      }

      @keyframes signMenuPop {
        to { opacity: 1; transform: translate(-50%, 0) scale(1); }
      }

      #pixelEditor {
        width: 256px;
        height: 256px;
        margin: 10px auto;
        background: #fff;
        box-shadow: 0 0 0 3px #05090d;
      }
      .swatch {
        width: 24px;
        height: 24px;
        min-height: 24px;
        padding: 0;
      }
      .swatch.active { outline: 3px solid #7fffd0; }

      #minimap {
        position: fixed;
        right: 14px;
        top: 14px;
        width: 174px;
        height: 160px;
        pointer-events: none;
        background: rgba(7,17,25,.9);
        animation: panelGlow 3.6s ease-in-out infinite;
      }

      .version-badge {
        position: fixed;
        left: 16px;
        bottom: 12px;
        z-index: 6;
        padding: 5px 8px;
        background: transparent;
        color: #7fffd0;
        font: 700 11px "Courier New", monospace;
        text-shadow: 2px 2px #05090d;
        box-shadow: none;
      }

      .admin-window {
        position: fixed;
        right: 14px;
        top: 190px;
        width: 420px;
        max-height: min(520px, calc(100vh - 220px));
        overflow: hidden;
        z-index: 9;
        display: none;
        pointer-events: auto;
      }

      .admin-window.visible {
        display: block;
        animation: editorPop .16s steps(4, end) forwards;
      }

      .admin-window-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin: 8px 0;
        color: #ffd55a;
        font: 700 12px "Courier New", monospace;
      }

      .admin-player-list {
        display: grid;
        gap: 6px;
        max-height: 400px;
        overflow-y: auto;
        padding-right: 4px;
      }

      .admin-tabs {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        margin: 8px 0;
      }

      .admin-tabs button.active {
        background: #ffd55a;
        color: #2a140c;
      }

      .admin-player-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 8px;
        padding: 7px;
        background: rgba(255, 240, 168, .13);
        box-shadow: inset 0 0 0 2px rgba(42,20,12,.55);
      }

      .admin-player-row strong,
      .admin-player-row span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .admin-player-row span {
        color: #f8d8a8;
        font-size: 10px;
      }

      .admin-player-row button {
        width: 100%;
        min-width: 0;
        padding-left: 8px;
        padding-right: 8px;
      }

      .admin-player-controls {
        display: grid;
        gap: 6px;
      }

      .admin-ban-row {
        display: grid;
        grid-template-columns: 78px 1fr 1fr 62px;
        gap: 5px;
      }

      .admin-ban-row select,
      .admin-ban-row input {
        pointer-events: auto;
        user-select: text;
        min-width: 0;
        width: 100%;
        padding: 6px 5px;
        border: 2px solid #3f2418;
        background: #fff0a8;
        color: #2a140c;
        font: 700 10px "Courier New", monospace;
      }

      .admin-player-row button.danger {
        background: #d63b3b;
        color: #fff0a8;
        box-shadow: inset 0 0 0 2px #2a140c, 3px 3px 0 rgba(42,20,12,.45);
      }

      .admin-ban-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 88px;
        gap: 8px;
        align-items: center;
        padding: 8px;
        background: rgba(255, 240, 168, .13);
        box-shadow: inset 0 0 0 2px rgba(42,20,12,.55);
      }

      .admin-ban-card strong,
      .admin-ban-card span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .admin-ban-card span {
        color: #f8d8a8;
        font-size: 10px;
      }

      .admin-ban-card button {
        width: 100%;
      }

      .admin-sign-card {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr) 78px;
        gap: 8px;
        align-items: center;
        padding: 8px;
        background: rgba(255, 240, 168, .13);
        box-shadow: inset 0 0 0 2px rgba(42,20,12,.55);
      }

      .admin-sign-preview {
        width: 44px;
        height: 44px;
        display: grid;
        background: #2a140c;
        box-shadow: 0 0 0 2px #2a140c;
        image-rendering: pixelated;
      }

      .admin-sign-preview span {
        display: block;
        min-width: 0;
        min-height: 0;
      }

      .admin-sign-card strong,
      .admin-sign-card span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .admin-sign-card span {
        color: #f8d8a8;
        font-size: 10px;
      }

      .admin-sign-actions {
        display: grid;
        gap: 5px;
      }

      .admin-sign-actions button {
        width: 100%;
        min-height: 28px;
        padding: 0 6px;
      }

      @media (hover: none), (pointer: coarse), (max-width: 760px) {
        .hud { gap: 8px; width: 128px; max-width: calc(100vw - 144px); }
        .hud .panel { padding: 10px; }
        .name-row { gap: 5px; }
        .name-edit { width: 22px; min-height: 22px; }
        #minimap { width: 112px; height: 104px; right: 10px; top: 10px; }
        .admin-window { right: 10px; top: 124px; width: calc(100vw - 20px); max-height: calc(100vh - 144px); }
        .inventory-window { left: 50%; top: 54%; width: calc(100vw - 22px); min-height: 0; max-height: calc(100vh - 180px); overflow-y: auto; }
        .equipment-window { left: 50%; top: 10px; width: calc(100vw - 22px); max-height: 160px; overflow-y: auto; transform: translateX(-50%) scale(.95); }
        .item-window { left: 50%; top: auto; bottom: 10px; width: calc(100vw - 22px); max-height: 210px; overflow-y: auto; transform: translateX(-50%) scale(.95); }
        .equipment-window.visible { animation: mobileGearPop .16s steps(4, end) forwards; }
        .paperdoll { height: 124px; }
        .equipment-grid { grid-template-columns: repeat(3, var(--slot-size)); justify-content: center; }
        .equipment-slot { min-height: 56px; }
        .inventory-content { min-height: min(488px, calc(100vh - 190px)); }
        .slot-grid { gap: 5px; }
        .inventory-slot-cell { padding: 3px 2px; }
        .recipe-list { min-height: min(454px, calc(100vh - 250px)); max-height: min(454px, calc(100vh - 250px)); }
        .recipe-card { grid-template-columns: 30px 1fr; }
        .recipe-card button { grid-column: 1 / -1; }
        .editor {
          left: 8px !important;
          top: 8px !important;
          width: calc(100vw - 16px);
          max-height: calc(100vh - 96px);
          padding: 12px;
          transform-origin: center top;
        }
        .editor.visible {
          animation: mobileEditorPop .18s steps(4, end) forwards;
        }
        #pixelEditor {
          width: min(236px, calc(100vw - 64px), calc(100vh - 360px));
          height: min(236px, calc(100vw - 64px), calc(100vh - 360px));
          min-width: 132px;
          min-height: 132px;
          margin: 8px auto;
        }
        .palette { max-height: 72px; overflow-y: auto; }
        .swatch { width: 22px; height: 22px; min-height: 22px; }
        .editor .row input { flex: 1 1 100%; }
        .editor .row button, .editor .row .loading-chip { flex: 1 1 auto; }
      }

      @keyframes mobileEditorPop {
        to { opacity: 1; transform: translateY(0) scale(1); }
      }
      @keyframes mobileGearPop {
        to { opacity: 1; transform: translateX(-50%) scale(1); }
      }

      .toast {
        position: fixed;
        left: 50%;
        bottom: 14px;
        z-index: 30;
        transform: translateX(-50%);
        background: #5ac85a;
        color: #111;
        padding: 8px 12px;
        font: 700 14px "Courier New", monospace;
        opacity: 0;
        transition: opacity .12s linear;
        box-shadow: 0 0 0 2px #05090d, 0 4px 0 #05090d;
      }
      .toast.visible { opacity: 1; }
      .toast.positive { background: #5ac85a; color: #08230e; }
      .toast.negative { background: #ff9f1c; color: #2a140c; }
      .toast.celebrate {
        top: 50%;
        bottom: auto;
        font-size: 22px;
        padding: 14px 18px;
        z-index: 20;
        animation: successShake .55s steps(8, end) 2;
      }
      .loading-chip {
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 0 12px;
        background: #5ac85a;
        color: #08230e;
        font: 700 14px "Courier New", monospace;
        box-shadow: 0 0 0 2px #05090d, 0 3px 0 #05090d, inset 0 -5px 0 rgba(0,0,0,.12);
      }
      .spinner {
        width: 10px;
        height: 10px;
        box-shadow: 0 -8px #08230e, 8px 0 #08230e, 0 8px #08230e, -8px 0 #08230e;
        animation: spinSteps .65s steps(4, end) infinite;
      }
      @keyframes spinSteps { to { transform: rotate(360deg); } }
      @keyframes successShake {
        0%, 100% { transform: translate(-50%, -50%); }
        20% { transform: translate(calc(-50% - 8px), -50%); }
        40% { transform: translate(calc(-50% + 8px), -50%); }
        60% { transform: translate(calc(-50% - 5px), -50%); }
        80% { transform: translate(calc(-50% + 5px), -50%); }
      }

      .modal {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: min(420px, calc(100vw - 28px));
        display: none;
        z-index: 10;
      }
      .modal.visible { display: block; }
      .confirm-panel {
        position: fixed;
        left: 50%;
        top: 50%;
        z-index: 12;
        width: min(360px, calc(100vw - 28px));
        display: none;
        transform: translate(-50%, -50%) scale(.95);
        opacity: 0;
      }
      .confirm-panel.visible {
        display: block;
        animation: confirmPop .16s steps(4, end) forwards;
      }
      @keyframes confirmPop {
        to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
      }
      .checkout-link {
        display: block;
        margin-top: 10px;
        padding: 12px;
        text-align: center;
        color: #08230e;
        background: #5ac85a;
        font-weight: 700;
        text-decoration: none;
        box-shadow: 0 0 0 2px #05090d, 0 4px 0 #05090d, inset 0 -6px 0 rgba(0,0,0,.14), inset 0 4px 0 rgba(255,255,255,.24);
      }
      .checkout-link:hover { background: #73e36e; transform: translateY(-1px); }
      .waypoint-field { display: grid; gap: 5px; color: #3f2418; font-size: 12px; font-weight: 800; margin: 8px 0; }
      .waypoint-colors { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 8px 0 10px; }
      .waypoint-colors button { min-height: 28px; padding: 0; box-shadow: 0 0 0 2px #2a140c, 0 2px 0 #2a140c; }
      .waypoint-colors button.active { box-shadow: 0 0 0 2px #2a140c, 0 0 0 4px #7fffd0; }
      .payment-section {
        margin-top: 12px;
        padding: 10px;
        background: rgba(255, 230, 180, .14);
        box-shadow: inset 0 0 0 2px rgba(42,20,12,.45);
      }
      .payment-section h3 {
        margin: 0 0 8px;
        color: #fff0a8;
        font-size: 13px;
        text-shadow: 2px 2px #2a140c;
      }
      .payment-methods {
        display: block;
        width: 100%;
        max-width: 490px;
        height: auto;
        margin: 8px auto 0;
        background: #fff;
        box-shadow: 0 0 0 2px #2a140c;
      }
      .payment-divider {
        margin: 12px 0 0;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 8px;
        align-items: center;
        color: #3f2418;
        font-size: 12px;
        font-weight: 700;
      }
      .payment-divider::before, .payment-divider::after {
        content: "";
        height: 2px;
        background: rgba(42,20,12,.45);
      }
      .payment-note {
        margin: 8px 0 0;
        color: #3f2418;
        font-size: 12px;
      }