/* Mask shelf: a warm plank above the CRT, masks hung on pegs. Desktop only. */
.mask-shelf{display:none}
@media (min-width:900px){
  .mask-shelf{display:block;flex:none;position:relative;padding:0 6px 7px;z-index:3}
  .mask-shelf::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9px;border-radius:2px;background:linear-gradient(#ffffff14,transparent 50%),repeating-linear-gradient(91deg,#5a3b24 0 7px,#523520 7px 9px,#60412a 9px 15px);box-shadow:inset 0 -3px 0 #2b1a0e,0 5px 8px rgb(0 0 0 / .55);pointer-events:none}
  .mask-shelf-items{display:flex;flex-wrap:nowrap;gap:4px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#92734f #24170d;padding:2px 2px 0}
  .mask-peg{position:relative;flex:0 0 46px;height:44px;display:grid;place-items:end center;padding:0 0 2px;border:0;border-radius:3px 3px 0 0;background:transparent}
  .mask-peg canvas{image-rendering:pixelated;width:30px;height:30px;object-fit:contain;filter:drop-shadow(2px 2px #19120c);transition:transform .12s}
  .mask-peg:hover canvas{transform:translateY(-2px)}
  .mask-shelf-tip{position:absolute;top:100%;z-index:8;transform:translate(-50%,2px);width:max-content;max-width:200px;padding:3px 6px;background:#d2bb86;color:#261b18;box-shadow:2px 2px #23180e;font:14px/1.15 var(--f-hand);text-align:center;white-space:normal;overflow-wrap:normal;word-break:normal;hyphens:none;pointer-events:none}
  .mask-peg:hover,.mask-peg:focus-visible{background:#120d0840}
  .mask-peg:focus-visible{outline:2px dashed #d8cfbf;outline-offset:-2px}
  .mask-peg[aria-pressed="true"]{background:var(--blood-around) center/46px 44px no-repeat;box-shadow:none}
  .mask-peg[aria-pressed="true"]::after{content:"";position:absolute;inset:0;background:var(--blood-over) center/46px 44px no-repeat;image-rendering:pixelated;pointer-events:none;transform:translateY(-2px)}
  .mask-peg[aria-pressed="true"] canvas{transform:translateY(-2px)}
}
@media (min-width:1024px) and (max-height:820px){.mask-peg{height:38px}.mask-peg canvas{width:26px;height:26px}}
/* Tool hooks: selected state mirrors the equipped tool. Blocky pixel blood:
   splats AROUND the item (background, under it) and drips OVER it (::after),
   replacing any cyan glow; keyboard focus keeps a neutral dashed outline. */
.wall-tool-hook[aria-pressed="true"]{background:var(--blood-around) center 12px/46px 44px no-repeat;outline:0}
.wall-tool-hook[aria-pressed="true"]:focus-visible,.mask-peg[aria-pressed="true"]:focus-visible{outline:2px dashed #d8cfbf;outline-offset:-2px}
.wall-tool-hook[aria-pressed="true"]::after{content:"";position:absolute;left:0;right:0;top:12px;height:44px;background:var(--blood-over) center top/46px 44px no-repeat;image-rendering:pixelated;pointer-events:none}
.mask-peg,.wall-tool-hook{--blood-over:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 22' shape-rendering='crispEdges'%3E%3Crect x='4' y='0' width='3' height='2' fill='%23c41f2f'/%3E%3Crect x='5' y='2' width='2' height='1' fill='%23c41f2f'/%3E%3Crect x='5' y='3' width='1' height='2' fill='%238e0f1e'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%238e0f1e'/%3E%3Crect x='4' y='0' width='1' height='1' fill='%23f05a4e'/%3E%3Crect x='15' y='0' width='4' height='1' fill='%23c41f2f'/%3E%3Crect x='16' y='1' width='2' height='2' fill='%23c41f2f'/%3E%3Crect x='17' y='3' width='1' height='3' fill='%238e0f1e'/%3E%3Crect x='17' y='7' width='1' height='1' fill='%23c41f2f'/%3E%3Crect x='16' y='0' width='1' height='1' fill='%23f05a4e'/%3E%3Crect x='9' y='8' width='2' height='1' fill='%23c41f2f'/%3E%3Crect x='10' y='9' width='1' height='1' fill='%238e0f1e'/%3E%3Crect x='8' y='10' width='1' height='1' fill='%23c41f2f'/%3E%3Crect x='14' y='11' width='2' height='2' fill='%23c41f2f'/%3E%3Crect x='14' y='11' width='1' height='1' fill='%23f05a4e'/%3E%3Crect x='16' y='13' width='1' height='1' fill='%238e0f1e'/%3E%3Crect x='13' y='14' width='1' height='1' fill='%23c41f2f'/%3E%3Crect x='7' y='15' width='1' height='1' fill='%238e0f1e'/%3E%3Crect x='11' y='0' width='1' height='1' fill='%238e0f1e'/%3E%3C/svg%3E");--blood-around:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 22' shape-rendering='crispEdges'%3E%3Crect x='0' y='12' width='3' height='3' fill='%23c41f2f'/%3E%3Crect x='1' y='15' width='2' height='1' fill='%238e0f1e'/%3E%3Crect x='0' y='12' width='1' height='1' fill='%23f05a4e'/%3E%3Crect x='3' y='11' width='1' height='1' fill='%23c41f2f'/%3E%3Crect x='1' y='9' width='1' height='1' fill='%238e0f1e'/%3E%3Crect x='20' y='4' width='3' height='3' fill='%23c41f2f'/%3E%3Crect x='21' y='7' width='1' height='2' fill='%238e0f1e'/%3E%3Crect x='22' y='4' width='1' height='1' fill='%23f05a4e'/%3E%3Crect x='19' y='3' width='1' height='1' fill='%23c41f2f'/%3E%3Crect x='21' y='10' width='1' height='1' fill='%23c41f2f'/%3E%3Crect x='6' y='20' width='11' height='2' fill='%238e0f1e'/%3E%3Crect x='8' y='19' width='7' height='1' fill='%23c41f2f'/%3E%3Crect x='9' y='19' width='2' height='1' fill='%23f05a4e'/%3E%3Crect x='5' y='21' width='1' height='1' fill='%234d0710'/%3E%3Crect x='17' y='21' width='2' height='1' fill='%234d0710'/%3E%3Crect x='18' y='19' width='1' height='1' fill='%23c41f2f'/%3E%3Crect x='3' y='19' width='1' height='1' fill='%23c41f2f'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23c41f2f'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%238e0f1e'/%3E%3Crect x='20' y='15' width='2' height='2' fill='%23c41f2f'/%3E%3Crect x='20' y='15' width='1' height='1' fill='%23f05a4e'/%3E%3Crect x='22' y='18' width='1' height='1' fill='%238e0f1e'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:reduce){.mask-peg canvas{transition:none}}