:root { --ink:#191814; --accent:#ffe77a; --accent-2:#d14b3f; }
.game-shell { background:#81784f; }
.game-shell::before { content:""; position:absolute; inset:0; z-index:4; pointer-events:none; background:linear-gradient(90deg,transparent 49.7%,rgba(255,255,255,.04) 50%,transparent 50.3%); background-size:7px 100%; }
canvas { image-rendering:pixelated; }
.game-shell .mobile-joystick.is-horizontal { width:min(55vw,260px); }
.game-shell .mobile-joystick.is-horizontal .mobile-joystick-ring {
  background:
    linear-gradient(90deg,transparent 8%,color-mix(in srgb,var(--accent) 34%,transparent) 48% 52%,transparent 92%) center/72% 1px no-repeat,
    radial-gradient(circle,transparent 0 47%,color-mix(in srgb,var(--accent) 11%,transparent) 49% 69%,transparent 71%);
}
.game-shell .mobile-joystick.is-horizontal.is-active .mobile-joystick-ring { opacity:.5; }
.game-shell .mobile-joystick.is-horizontal { width:min(55vw,260px); }
.game-shell .mobile-joystick.is-horizontal .mobile-joystick-ring {
  background:
    linear-gradient(90deg,transparent 8%,color-mix(in srgb,var(--accent) 34%,transparent) 48% 52%,transparent 92%) center/72% 1px no-repeat,
    radial-gradient(circle,transparent 0 47%,color-mix(in srgb,var(--accent) 11%,transparent) 49% 69%,transparent 71%);
}
.game-shell .mobile-joystick.is-horizontal.is-active .mobile-joystick-ring { opacity:.5; }